/* _content/WiderpayCoreBankingApp/Components/Layout/IdleTimeoutSentinel.razor.rz.scp.css */
/* Countdown dialog for the inactivity timeout.
   Scoped to IdleTimeoutSentinel: every selector below only ever matches markup this
   component renders. Colours come from the app tokens in wwwroot/app.css so the dialog
   re-themes with the rest of the workspace; only the amber/red urgency ramp is local,
   because "you are about to lose this session" must not be brand pink. */

.wp-idle-overlay[b-1d35m7vzzf] {
    position: fixed;
    inset: 0;
    /* Above the workspace and the Telerik popups (which sit in the 10000s), below the
       Blazor reconnect modal at 20000 — a dead circuit is the more urgent message. */
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 8, 14, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Stops a wheel over the backdrop from scrolling the workspace behind it. */
    overscroll-behavior: contain;
    animation: wp-idle-fade-b-1d35m7vzzf .22s ease-out both;
}

.wp-idle-card[b-1d35m7vzzf] {
    position: relative;
    overflow: hidden;
    width: min(100%, 424px);
    padding: 30px 30px 24px;
    border-radius: 20px;
    background: var(--surface-card-bg, #fff);
    color: var(--surface-text, #1f1f23);
    border: 1px solid var(--surface-border, #e2e2e6);
    box-shadow: 0 28px 70px rgba(8, 6, 12, .38), 0 2px 6px rgba(8, 6, 12, .12);
    text-align: center;
    animation: wp-idle-rise-b-1d35m7vzzf .28s cubic-bezier(.22, 1, .36, 1) both;
}

/* Soft brand wash behind the header; purely decorative. */
.wp-idle-aurora[b-1d35m7vzzf] {
    position: absolute;
    top: -120px;
    left: 50%;
    width: 320px;
    height: 240px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-pink, #c2185b) 26%, transparent), transparent 68%);
    opacity: .55;
    transition: background .3s ease;
}

.wp-idle-overlay.is-critical .wp-idle-aurora[b-1d35m7vzzf] {
    background: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, .3), transparent 68%);
}

.wp-idle-head[b-1d35m7vzzf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    margin-bottom: 22px;
}

.wp-idle-badge[b-1d35m7vzzf] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.28rem;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-pink, #c2185b), var(--brand-pink-dark, #8e1243));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-pink, #c2185b) 34%, transparent);
}

.wp-idle-overlay.is-critical .wp-idle-badge[b-1d35m7vzzf] {
    background: linear-gradient(145deg, #ef4444, #b91c1c);
    box-shadow: 0 8px 20px rgba(220, 38, 38, .34);
}

.wp-idle-heading[b-1d35m7vzzf] {
    min-width: 0;
}

.wp-idle-eyebrow[b-1d35m7vzzf] {
    margin: 0 0 2px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--surface-text-muted, #6c757d);
}

.wp-idle-title[b-1d35m7vzzf] {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.018em;
}

/* ---- countdown dial ---------------------------------------------------- */

.wp-idle-dial[b-1d35m7vzzf] {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0 auto 20px;
}

.wp-idle-ring[b-1d35m7vzzf] {
    width: 100%;
    height: 100%;
    /* -90deg puts the start of the arc at 12 o'clock instead of 3. */
    transform: rotate(-90deg);
}

.wp-idle-ring-track[b-1d35m7vzzf] {
    fill: none;
    stroke: color-mix(in srgb, var(--surface-text, #1f1f23) 10%, transparent);
    stroke-width: 9;
}

.wp-idle-ring-value[b-1d35m7vzzf] {
    fill: none;
    stroke: var(--brand-pink, #c2185b);
    stroke-width: 9;
    stroke-linecap: round;
    /* Matches the 1s tick from idle-timeout.js, so the arc glides instead of stepping.
       Linear, because any easing would make it look like it is slowing down near zero. */
    transition: stroke-dashoffset 1s linear, stroke .3s ease;
}

.wp-idle-overlay.is-critical .wp-idle-ring-value[b-1d35m7vzzf] {
    stroke: #ef4444;
}

.wp-idle-dial-face[b-1d35m7vzzf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.wp-idle-count[b-1d35m7vzzf] {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    /* Tabular figures: without these the whole number jitters sideways every second. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.wp-idle-overlay.is-critical .wp-idle-count[b-1d35m7vzzf] {
    color: #ef4444;
    animation: wp-idle-pulse-b-1d35m7vzzf 1s ease-in-out infinite;
}

.wp-idle-unit[b-1d35m7vzzf] {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--surface-text-muted, #6c757d);
}

.wp-idle-spinner[b-1d35m7vzzf] {
    width: 42px;
    height: 42px;
    border: 4px solid color-mix(in srgb, var(--surface-text, #1f1f23) 14%, transparent);
    border-top-color: var(--brand-pink, #c2185b);
    border-radius: 50%;
    animation: wp-idle-spin-b-1d35m7vzzf .9s linear infinite;
}

/* ---- copy + actions ---------------------------------------------------- */

.wp-idle-text[b-1d35m7vzzf] {
    margin: 0 0 22px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--surface-text-muted, #6c757d);
}

.wp-idle-text strong[b-1d35m7vzzf] {
    color: var(--surface-text, #1f1f23);
    font-weight: 600;
}

.wp-idle-actions[b-1d35m7vzzf] {
    display: flex;
    gap: 10px;
}

.wp-idle-btn[b-1d35m7vzzf] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 11px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}

.wp-idle-btn:active[b-1d35m7vzzf] {
    transform: translateY(1px);
}

.wp-idle-btn:focus-visible[b-1d35m7vzzf] {
    outline: 2px solid var(--brand-pink, #c2185b);
    outline-offset: 2px;
}

.wp-idle-btn-primary[b-1d35m7vzzf] {
    border: none;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-pink, #c2185b), var(--brand-pink-dark, #8e1243));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-pink, #c2185b) 30%, transparent);
}

.wp-idle-btn-primary:hover[b-1d35m7vzzf] {
    filter: brightness(1.07);
}

.wp-idle-btn-ghost[b-1d35m7vzzf] {
    border: 1px solid var(--surface-border, #e2e2e6);
    background: transparent;
    color: var(--surface-text-muted, #6c757d);
}

.wp-idle-btn-ghost:hover[b-1d35m7vzzf] {
    border-color: #ef4444;
    color: #ef4444;
}

.wp-idle-foot[b-1d35m7vzzf] {
    margin: 16px 0 0;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--surface-text-muted, #6c757d);
    opacity: .85;
}

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 480px) {
    .wp-idle-card[b-1d35m7vzzf] {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }

    .wp-idle-dial[b-1d35m7vzzf] {
        width: 140px;
        height: 140px;
    }

    .wp-idle-count[b-1d35m7vzzf] {
        font-size: 2.1rem;
    }

    .wp-idle-actions[b-1d35m7vzzf] {
        flex-direction: column;
    }
}

/* ---- motion ------------------------------------------------------------ */

@keyframes wp-idle-fade-b-1d35m7vzzf {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wp-idle-rise-b-1d35m7vzzf {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes wp-idle-spin-b-1d35m7vzzf {
    to { transform: rotate(360deg); }
}

@keyframes wp-idle-pulse-b-1d35m7vzzf {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* An operator who has asked for less motion still gets the dialog and the number —
   only the decoration stops. */
@media (prefers-reduced-motion: reduce) {
    .wp-idle-overlay[b-1d35m7vzzf],
    .wp-idle-card[b-1d35m7vzzf] {
        animation: none;
    }

    .wp-idle-ring-value[b-1d35m7vzzf] {
        transition: none;
    }

    .wp-idle-overlay.is-critical .wp-idle-count[b-1d35m7vzzf] {
        animation: none;
    }
}
/* _content/WiderpayCoreBankingApp/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-372kpit051] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* The first-sign-in password gate: no sidebar, no tab strip, the card centred
   on the full viewport. See MainLayout.razor. */
.page-gated[b-372kpit051] {
    min-height: 100vh;
    background-image: linear-gradient(150deg, var(--brand-sidebar-top) 0%, var(--brand-sidebar-bottom) 100%);
}

/* Shown for the moment between the circuit connecting and the RBAC profile being
   resolved — the workspace must not mount before its authority is known. */
.layout-boot[b-372kpit051] {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.layout-boot-spinner[b-372kpit051] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--brand-pink, #e6007e);
    border-radius: 50%;
    animation: layout-boot-spin-b-372kpit051 .8s linear infinite;
}

@keyframes layout-boot-spin-b-372kpit051 {
    to {
        transform: rotate(360deg);
    }
}

main[b-372kpit051] {
    flex: 1;
    /* min-width:0 lets this flex item shrink below its content width so the
       workspace tab strip scrolls internally instead of widening the page. */
    min-width: 0;
}

.sidebar[b-372kpit051] {
    background-image: linear-gradient(180deg, var(--brand-sidebar-top) 0%, var(--brand-sidebar-bottom) 100%);
    display: flex;
    flex-direction: column;
}

.top-row[b-372kpit051] {
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    justify-content: flex-end;
    height: 4rem;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

    .top-row[b-372kpit051]  .btn-change-password {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 1rem;
        border: 1px solid var(--surface-border);
        border-radius: 6px;
        color: var(--surface-text);
        font-weight: 500;
        font-size: 0.9rem;
    }

        .top-row[b-372kpit051]  .btn-change-password:hover {
            background-color: var(--surface-page-bg);
            text-decoration: none;
        }

    .top-row[b-372kpit051]  .btn-logout {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 1rem;
        border: 1px solid rgba(227, 52, 74, 0.3);
        border-radius: 6px;
        background-color: rgba(227, 52, 74, 0.08);
        color: #e3344a;
        font-weight: 600;
        font-size: 0.9rem;
        transition: background-color 0.15s ease;
    }

        .top-row[b-372kpit051]  .btn-logout:hover {
            background-color: rgba(227, 52, 74, 0.14);
            text-decoration: none;
        }

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

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

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

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

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

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

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

#blazor-error-ui[b-372kpit051] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-372kpit051] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/WiderpayCoreBankingApp/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ipxxo8r494] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ipxxo8r494] {
    background-color: rgba(255, 255, 255, 0.5);
}

.sidebar-brand[b-ipxxo8r494] {
    display: flex;
    align-items: center;
    height: 4.5rem;
    flex-shrink: 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.brand-logo[b-ipxxo8r494] {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

/* --- Signed-in user card --- */
.sidebar-profile[b-ipxxo8r494] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.85rem 0.9rem 0.5rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.sp-avatar[b-ipxxo8r494] {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    /* Dimmed: the accent is blended ~55% into the dark sidebar tone so the circle
       reads as a quiet, professional badge instead of a bright raspberry dot. */
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-pink) 58%, var(--brand-sidebar-bottom)) 0%,
        color-mix(in srgb, var(--brand-pink) 40%, var(--brand-sidebar-bottom)) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-info[b-ipxxo8r494] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sp-name[b-ipxxo8r494] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-role[b-ipxxo8r494] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}

.sp-status[b-ipxxo8r494] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #28c76f;
    box-shadow: 0 0 0 2px rgba(40, 199, 111, 0.25);
    flex-shrink: 0;
}

.nav-item[b-ipxxo8r494] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

.sidebar-nav[b-ipxxo8r494]  .nav-link {
    box-sizing: border-box;
    color: #d7d2da;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1.2;
    width: 100%;
    padding: 0 0.85rem;
    gap: 0.6rem;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

    .sidebar-nav[b-ipxxo8r494]  .nav-link .bi {
        font-size: 1rem;
        width: 1.1rem;
        flex-shrink: 0;
        text-align: center;
    }

    .sidebar-nav[b-ipxxo8r494]  .nav-link .nav-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-nav[b-ipxxo8r494]  .nav-link .nav-caret {
        margin-left: auto;
        flex-shrink: 0;
        font-size: 0.7rem;
        opacity: 0.6;
        transition: transform 0.2s ease;
    }

    .sidebar-nav[b-ipxxo8r494]  .nav-link.nav-group-toggle.expanded .nav-caret {
        transform: rotate(180deg);
    }

.sidebar-nav[b-ipxxo8r494]  .nav-link {
    position: relative;
}

.sidebar-nav[b-ipxxo8r494]  .nav-link.active {
    background-color: color-mix(in srgb, var(--brand-pink) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-pink) 28%, transparent);
    color: white;
    font-weight: 600;
}

    /* left accent bar on the active item (professional admin look) */
    .sidebar-nav[b-ipxxo8r494]  .nav-link.active::before {
        content: "";
        position: absolute;
        left: -0.85rem;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 1.4rem;
        border-radius: 0 3px 3px 0;
        background-color: var(--brand-pink);
    }

.sidebar-nav[b-ipxxo8r494]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

.sidebar-nav[b-ipxxo8r494]  .nav-submenu {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    position: relative;
}

    .sidebar-nav[b-ipxxo8r494]  .nav-submenu.show {
        max-height: 30rem;
    }

    .sidebar-nav[b-ipxxo8r494]  .nav-submenu::before {
        content: "";
        position: absolute;
        left: 1.4rem;
        top: 0;
        bottom: 0.9rem;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.2);
    }

.sidebar-nav[b-ipxxo8r494]  .nav-sublink {
    position: relative;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.83rem;
    padding: 0.55rem 0.85rem 0.55rem 2.5rem;
    text-decoration: none;
    border-radius: 6px;
    appearance: none;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

    .sidebar-nav[b-ipxxo8r494]  .nav-sublink::before {
        content: "";
        position: absolute;
        left: 1.4rem;
        top: 50%;
        width: 0.7rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
    }

    .sidebar-nav[b-ipxxo8r494]  .nav-sublink:hover {
        color: white;
        background-color: rgba(255, 255, 255, 0.06);
    }

.sidebar-footer[b-ipxxo8r494] {
    padding: 0.85rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.btn-check-update[b-ipxxo8r494] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    height: 2.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

    .btn-check-update .bi[b-ipxxo8r494] {
        font-size: 0.95rem;
        opacity: 0.8;
    }

    .btn-check-update:hover[b-ipxxo8r494] {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.22);
    }

    .btn-check-update:active[b-ipxxo8r494] {
        transform: translateY(1px);
    }

.nav-logout[b-ipxxo8r494] {
    color: rgba(255, 107, 107, 0.9);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    height: 2.3rem;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-logout:hover[b-ipxxo8r494] {
        color: #ff8c8c;
        background-color: rgba(255, 107, 107, 0.08);
    }

.nav-scrollable[b-ipxxo8r494] {
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ipxxo8r494] {
    display: flex;
}

.nav-link-large[b-ipxxo8r494] {
    font-size: 30px; 
}

@media (min-width: 641px) {
    .navbar-toggler[b-ipxxo8r494] {
        display: none;
    }

    .nav-scrollable[b-ipxxo8r494] {
        /* Never collapse the sidebar for wide screens */
        display: flex;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 4.5rem);
        overflow-y: auto;
    }
}
/* _content/WiderpayCoreBankingApp/Components/Layout/ThemeSwitcher.razor.rz.scp.css */
.theme-trigger[b-6sjge83wne] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* Neutral ghost control so it blends with the sidebar (matches Check Update). */
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .theme-trigger:hover[b-6sjge83wne] {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.22);
    }

.theme-trigger-icon[b-6sjge83wne] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    /* Dimmed accent (blended into the dark sidebar tone) to match the profile avatar. */
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-pink) 58%, var(--brand-sidebar-bottom)) 0%,
        color-mix(in srgb, var(--brand-pink) 40%, var(--brand-sidebar-bottom)) 100%);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-trigger-label[b-6sjge83wne] {
    flex: 1;
    text-align: left;
}

.theme-trigger-caret[b-6sjge83wne] {
    font-size: 0.75rem;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

    .theme-trigger-caret.open[b-6sjge83wne] {
        transform: rotate(90deg);
    }

.theme-panel[b-6sjge83wne] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    margin-top: 0.5rem;
}

    .theme-panel.show[b-6sjge83wne] {
        max-height: 16rem;
    }

.theme-option[b-6sjge83wne] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

    .theme-option:hover[b-6sjge83wne] {
        background-color: rgba(255, 255, 255, 0.08);
        color: white;
    }

    .theme-option.active[b-6sjge83wne] {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        font-weight: 600;
    }

.theme-option-dot[b-6sjge83wne] {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.theme-dot-default[b-6sjge83wne] {
    background-color: var(--brand-pink);
}

.theme-dot-light[b-6sjge83wne] {
    background-color: #fafafa;
}

.theme-dot-dark[b-6sjge83wne] {
    background-color: #121214;
}

.theme-option-check[b-6sjge83wne] {
    margin-left: auto;
    color: var(--brand-pink);
    font-size: 0.8rem;
}

.theme-custom-picker[b-6sjge83wne] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem 0.2rem;
}

    .theme-custom-picker label[b-6sjge83wne] {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
    }

    .theme-custom-picker input[type="color"][b-6sjge83wne] {
        width: 2.2rem;
        height: 1.8rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        background: none;
        padding: 0;
        cursor: pointer;
    }
/* _content/WiderpayCoreBankingApp/Components/Layout/TopBar.razor.rz.scp.css */
.app-topbar[b-g61recg1o0] {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.75rem;
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* -------- left: greeting + date -------- */
.topbar-left[b-g61recg1o0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.topbar-greeting[b-g61recg1o0] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    line-height: 1.1;
}

.greeting-hello[b-g61recg1o0] {
    font-size: 0.95rem;
    color: var(--surface-text-muted);
}

.greeting-name[b-g61recg1o0] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--surface-text);
    white-space: nowrap;
}

.topbar-date[b-g61recg1o0] {
    font-size: 0.74rem;
    color: var(--surface-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* -------- right cluster -------- */
.topbar-right[b-g61recg1o0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topbar-search[b-g61recg1o0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4rem;
    padding: 0 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background-color: var(--surface-page-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .topbar-search:focus-within[b-g61recg1o0] {
        border-color: var(--brand-pink);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-pink) 12%, transparent);
    }

    .topbar-search i[b-g61recg1o0] {
        color: var(--surface-text-muted);
        font-size: 0.9rem;
    }

    .topbar-search input[b-g61recg1o0] {
        border: none;
        outline: none;
        background: transparent;
        width: 18rem;
        max-width: 26vw;
        font-size: 0.85rem;
        color: var(--surface-text);
    }

        .topbar-search input[b-g61recg1o0]::placeholder {
            color: var(--surface-text-muted);
        }

.topbar-icon-btn[b-g61recg1o0] {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background-color: var(--surface-card-bg);
    color: var(--surface-text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .topbar-icon-btn:hover[b-g61recg1o0] {
        background-color: var(--surface-page-bg);
        border-color: var(--brand-pink);
        color: var(--brand-pink);
    }

.topbar-badge[b-g61recg1o0] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background-color: var(--brand-pink);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--topbar-bg);
}

/* Briefly pulses when the background approval-queue poll sees the pending
   count rise, so a checker notices a new item without needing a toast. */
.topbar-icon-btn.pulse[b-g61recg1o0] {
    animation: topbar-bell-pulse-b-g61recg1o0 0.6s ease-in-out 2;
    border-color: var(--brand-pink);
    color: var(--brand-pink);
}

@keyframes topbar-bell-pulse-b-g61recg1o0 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.topbar-sep[b-g61recg1o0] {
    width: 1px;
    height: 2rem;
    background-color: var(--surface-border);
    margin: 0 0.25rem;
}

/* -------- user chip + dropdown -------- */
.user-menu[b-g61recg1o0] {
    position: relative;
}

.user-chip[b-g61recg1o0] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 2.7rem;
    padding: 0 0.55rem 0 0.5rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background-color: var(--surface-card-bg);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .user-chip:hover[b-g61recg1o0],
    .user-chip.active[b-g61recg1o0] {
        border-color: var(--brand-pink);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.user-avatar[b-g61recg1o0] {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
    letter-spacing: 0.02em;
}

    .user-avatar.lg[b-g61recg1o0] {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1rem;
    }

.user-meta[b-g61recg1o0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    max-width: 11rem;
}

.user-name[b-g61recg1o0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--surface-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11rem;
}

.user-role[b-g61recg1o0] {
    font-size: 0.7rem;
    color: var(--surface-text-muted);
}

.user-caret[b-g61recg1o0] {
    font-size: 0.7rem;
    color: var(--surface-text-muted);
    margin-left: 0.15rem;
}

.user-backdrop[b-g61recg1o0] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.user-dropdown[b-g61recg1o0] {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 17rem;
    z-index: 50;
    background-color: var(--surface-card-bg);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    animation: dd-in-b-g61recg1o0 0.14s ease;
}

@keyframes dd-in-b-g61recg1o0 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-head[b-g61recg1o0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-image: linear-gradient(135deg, var(--brand-banner-start) 0%, var(--brand-banner-end) 100%);
    color: #fff;
}

.dd-id[b-g61recg1o0] {
    min-width: 0;
}

.dd-name[b-g61recg1o0] {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-email[b-g61recg1o0] {
    font-size: 0.74rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-role-badge[b-g61recg1o0] {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.18);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.user-dropdown-list[b-g61recg1o0] {
    padding: 0.4rem;
}

.user-dropdown-item[b-g61recg1o0] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--surface-text);
    font-size: 0.86rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .user-dropdown-item i[b-g61recg1o0] {
        font-size: 1rem;
        color: var(--surface-text-muted);
        width: 1.2rem;
        text-align: center;
    }

    .user-dropdown-item:hover[b-g61recg1o0] {
        background-color: var(--surface-page-bg);
        color: var(--brand-pink);
    }

        .user-dropdown-item:hover i[b-g61recg1o0] {
            color: var(--brand-pink);
        }

    .user-dropdown-item.danger[b-g61recg1o0] {
        margin: 0.4rem;
        color: #e3344a;
    }

        .user-dropdown-item.danger i[b-g61recg1o0] {
            color: #e3344a;
        }

        .user-dropdown-item.danger:hover[b-g61recg1o0] {
            background-color: rgba(227, 52, 74, 0.1);
            color: #e3344a;
        }

.user-dropdown-sep[b-g61recg1o0] {
    height: 1px;
    background-color: var(--surface-border);
    margin: 0.2rem 0;
}

/* -------- responsive -------- */
@media (max-width: 900px) {
    .topbar-search[b-g61recg1o0],
    .topbar-date[b-g61recg1o0] {
        display: none;
    }
}

@media (max-width: 640px) {
    .user-meta[b-g61recg1o0] {
        display: none;
    }

    .app-topbar[b-g61recg1o0] {
        padding: 0 1rem;
    }
}
/* _content/WiderpayCoreBankingApp/Components/Layout/WorkspaceTabs.razor.rz.scp.css */
.workspace-shell[b-nwtj7ag8kg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Allow this column to shrink horizontally so the tab strip scrolls
       internally rather than pushing the whole layout wider. */
    min-width: 0;
}

/* The TabStrip is now just the header bar; the page content is rendered in a
   persistent sibling host below it (.workspace-content-host) for keep-alive tabs. */
[b-nwtj7ag8kg] .workspace-tabstrip {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: none;
    min-width: 0;
}

/* --- Tab header bar: match the dark brand strip --- */
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items,
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items-wrapper {
    background-color: var(--brand-sidebar-bottom);
    padding: 0.55rem 0.75rem 0;
    border: none;
    gap: 0.3rem;
    /* Overflowing tabs scroll horizontally inside this bar (VS Code / browser
       style) instead of stretching the page. */
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-pink) 55%, transparent) transparent;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}

/* Slim, on-brand horizontal scrollbar for the tab bar (WebKit). */
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items::-webkit-scrollbar,
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items-wrapper::-webkit-scrollbar {
    height: 6px;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items::-webkit-scrollbar-thumb,
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--brand-pink) 55%, transparent);
    border-radius: 3px;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items::-webkit-scrollbar-track,
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-items-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

/* Tabs keep their natural width and never squash together. */
[b-nwtj7ag8kg] .workspace-tabstrip .k-item {
    flex: 0 0 auto;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-item {
    border: none;
    border-radius: 10px 10px 0 0;
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-item:hover {
    color: #fff;
    background-color: color-mix(in srgb, var(--brand-pink) 16%, transparent);
    transform: translateY(-1px);
}

/* Active tab (covers both old .k-state-active and newer .k-active).
   A raspberry accent cap on top + soft elevation makes the selected tab pop
   and connect cleanly to the content area below. */
[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-state-active,
[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-active {
    color: var(--surface-text);
    background-color: var(--surface-page-bg);
    box-shadow: inset 0 3px 0 0 var(--brand-pink), 0 -2px 10px rgba(0, 0, 0, 0.18);
    transform: none;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-state-active .ws-tab-title,
[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-active .ws-tab-title {
    color: var(--surface-text);
    font-weight: 600;
}

/* Active tab icon picks up the brand accent */
[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-state-active .ws-tab .bi,
[b-nwtj7ag8kg] .workspace-tabstrip .k-item.k-active .ws-tab .bi {
    color: var(--brand-pink);
    opacity: 1;
}

[b-nwtj7ag8kg] .workspace-tabstrip .k-link {
    padding: 0;
    color: inherit;
}

/* --- Header template content --- */
.ws-tab[b-nwtj7ag8kg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem 0.6rem 0.95rem;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.ws-tab .bi[b-nwtj7ag8kg] {
    font-size: 0.85rem;
    opacity: 0.8;
}

.ws-tab-title[b-nwtj7ag8kg] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-tab-close[b-nwtj7ag8kg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border-radius: 4px;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ws-tab-close:hover[b-nwtj7ag8kg] {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.12);
    transform: scale(1.12);
}

/* The TabStrip's own (now empty) content panel is collapsed — content lives in the host below. */
[b-nwtj7ag8kg] .workspace-tabstrip > .k-content,
[b-nwtj7ag8kg] .workspace-tabstrip .k-tabstrip-content,
[b-nwtj7ag8kg] .workspace-tabstrip > .k-animation-container {
    display: none !important;
}

/* --- Persistent keep-alive content host --- */
.workspace-content-host[b-nwtj7ag8kg] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background-color: var(--surface-page-bg);
}

.workspace-content[b-nwtj7ag8kg] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Inactive tabs stay mounted but hidden (no re-render on switch). */
.tab-hidden[b-nwtj7ag8kg] {
    display: none !important;
}

/* Refused-route banner: shown when a deep link or in-page navigation targets a
   route the signed-in user has not been granted. See WorkspaceTabs.razor. */
.ws-denied[b-nwtj7ag8kg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 16px 0;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #c62828 35%, transparent);
    background: color-mix(in srgb, #c62828 12%, transparent);
    color: var(--surface-text);
    font-size: .84rem;
    line-height: 1.45;
}

    .ws-denied > i[b-nwtj7ag8kg] {
        color: #ef5350;
        font-size: 1rem;
    }

    .ws-denied > span[b-nwtj7ag8kg] {
        flex: 1;
    }

.ws-denied-close[b-nwtj7ag8kg] {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--surface-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
}

    .ws-denied-close:hover[b-nwtj7ag8kg] {
        color: var(--surface-text);
    }
/* _content/WiderpayCoreBankingApp/Components/Pages/Home.razor.rz.scp.css */
.dashboard-header h1[b-5i9fadpkvl] {
    color: var(--brand-pink);
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.15rem;
}

.dashboard-header p[b-5i9fadpkvl] {
    color: var(--brand-pink);
    opacity: 0.75;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.dashboard-banner[b-5i9fadpkvl] {
    position: relative;
    background-image: linear-gradient(120deg, var(--brand-banner-start) 0%, var(--brand-banner-end) 100%);
    border-radius: 10px;
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.dashboard-banner-pattern[b-5i9fadpkvl] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--brand-pink) 25%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 92% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
    pointer-events: none;
}

.dashboard-banner-text[b-5i9fadpkvl] {
    position: relative;
    z-index: 1;
}

    .dashboard-banner-text h2[b-5i9fadpkvl] {
        color: white;
        font-weight: 700;
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
    }

    .dashboard-banner-text p[b-5i9fadpkvl] {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.95rem;
        margin: 0;
    }

.dashboard-banner-icon[b-5i9fadpkvl] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--brand-pink) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-banner-icon .bi[b-5i9fadpkvl] {
        font-size: 1.9rem;
        color: var(--brand-pink);
    }

.stat-grid[b-5i9fadpkvl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.stat-card[b-5i9fadpkvl] {
    background-color: var(--surface-card-bg);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease;
}

.stat-icon[b-5i9fadpkvl] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-icon-pink[b-5i9fadpkvl] {
    background-color: color-mix(in srgb, var(--brand-pink) 12%, transparent);
    color: var(--brand-pink);
}

.stat-icon-purple[b-5i9fadpkvl] {
    background-color: rgba(111, 45, 168, 0.12);
    color: #6f2da8;
}

.stat-icon-blue[b-5i9fadpkvl] {
    background-color: rgba(31, 120, 209, 0.12);
    color: #1f78d1;
}

.stat-icon-green[b-5i9fadpkvl] {
    background-color: rgba(30, 166, 114, 0.12);
    color: #1ea672;
}

.stat-info[b-5i9fadpkvl] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-5i9fadpkvl] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--surface-text);
}

.stat-label[b-5i9fadpkvl] {
    font-size: 0.8rem;
    color: var(--surface-text-muted);
}

.dashboard-panel[b-5i9fadpkvl] {
    background-color: var(--surface-card-bg);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease;
}

.week-strip[b-5i9fadpkvl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.week-chip[b-5i9fadpkvl] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-image: linear-gradient(120deg, var(--brand-banner-start) 0%, var(--brand-banner-end) 100%);
    border-radius: 10px;
    padding: 1.1rem 1.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

    .week-chip[b-5i9fadpkvl]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--brand-pink) 30%, transparent) 0%, transparent 55%);
        pointer-events: none;
    }

.week-chip-icon[b-5i9fadpkvl] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.14);
}

    .week-chip-icon .bi[b-5i9fadpkvl] {
        font-size: 1.15rem;
        color: white;
    }

.week-chip-info[b-5i9fadpkvl] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.week-chip-value[b-5i9fadpkvl] {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-heading, inherit);
    color: white;
    letter-spacing: -0.01em;
}

.week-chip-label[b-5i9fadpkvl] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
}

.panel-header-icon[b-5i9fadpkvl] {
    color: var(--brand-pink);
    margin-right: 0.5rem;
    font-size: 0.95em;
}

.quick-actions-grid[b-5i9fadpkvl] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

/* NavActionLink renders its own <button> in ITS component tree, not Home's —
   Blazor CSS isolation only auto-scopes elements a .razor file writes
   directly, so reaching into a child component's markup needs ::deep
   (same reason the Telerik grid rules below use it for .dashboard-grid). */
.quick-actions-grid[b-5i9fadpkvl]  .quick-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background-color: var(--surface-card-bg);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 1.25rem 0.5rem;
    cursor: pointer;
    color: var(--surface-text);
    font: inherit;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .quick-actions-grid[b-5i9fadpkvl]  .quick-action-tile span {
        font-size: 0.78rem;
        font-weight: 600;
        text-align: center;
    }

    .quick-actions-grid[b-5i9fadpkvl]  .quick-action-tile:hover {
        border-color: var(--brand-pink);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }

.quick-action-icon[b-5i9fadpkvl] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.15s ease;
}

    .quick-actions-grid[b-5i9fadpkvl]  .quick-action-tile:hover .quick-action-icon {
        transform: scale(1.08);
    }

.qa-pink[b-5i9fadpkvl] {
    background-color: color-mix(in srgb, var(--brand-pink) 12%, transparent);
    color: var(--brand-pink);
}

.qa-purple[b-5i9fadpkvl] {
    background-color: rgba(111, 45, 168, 0.12);
    color: #6f2da8;
}

.qa-blue[b-5i9fadpkvl] {
    background-color: rgba(31, 120, 209, 0.12);
    color: #1f78d1;
}

.qa-green[b-5i9fadpkvl] {
    background-color: rgba(30, 166, 114, 0.12);
    color: #1ea672;
}

.chart-grid[b-5i9fadpkvl] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

    .chart-grid .dashboard-panel[b-5i9fadpkvl] {
        margin-top: 1.5rem;
    }

/* TelerikChart renders its own root element internally too — same ::deep
   requirement as the grid/quick-action rules above. Width/Height are also
   set directly as TelerikChart parameters in the markup as a belt-and-braces
   fallback, so sizing does not depend on this rule alone. */
.chart-panel-wide[b-5i9fadpkvl]  .dashboard-trend-chart,
.chart-panel-narrow[b-5i9fadpkvl]  .dashboard-tier-chart {
    width: 100%;
    height: 320px;
}

.panel-empty[b-5i9fadpkvl] {
    color: var(--surface-text-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

@media (max-width: 1024px) {
    .chart-grid[b-5i9fadpkvl] {
        grid-template-columns: 1fr;
    }

    .week-strip[b-5i9fadpkvl] {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid[b-5i9fadpkvl] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .quick-actions-grid[b-5i9fadpkvl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-panel-header[b-5i9fadpkvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .dashboard-panel-header h3[b-5i9fadpkvl] {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--surface-text);
        margin: 0;
    }

.panel-link[b-5i9fadpkvl] {
    color: var(--brand-pink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

    .panel-link:hover[b-5i9fadpkvl] {
        text-decoration: underline;
    }

/* Recent Transactions Telerik grid — blended seamlessly into the panel card */
.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid,
.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid .k-grid-header,
.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid .k-grid-header-wrap {
    border: none;
    background: transparent;
}

.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid .k-grid-header .k-header {
    background: transparent;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--surface-text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--surface-border);
}

.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid td {
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--surface-border);
    color: var(--surface-text);
    font-size: 0.88rem;
    vertical-align: middle;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid .k-master-row:last-child td {
    border-bottom: none;
}

.dashboard-panel[b-5i9fadpkvl]  .dashboard-grid tbody tr:hover {
    background-color: color-mix(in srgb, var(--brand-pink) 6%, transparent);
}

.agent-cell[b-5i9fadpkvl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.agent-avatar[b-5i9fadpkvl] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-pink[b-5i9fadpkvl] {
    background-color: color-mix(in srgb, var(--brand-pink) 14%, transparent);
    color: var(--brand-pink);
}

.avatar-purple[b-5i9fadpkvl] {
    background-color: rgba(111, 45, 168, 0.14);
    color: #6f2da8;
}

.avatar-blue[b-5i9fadpkvl] {
    background-color: rgba(31, 120, 209, 0.14);
    color: #1f78d1;
}

.avatar-green[b-5i9fadpkvl] {
    background-color: rgba(30, 166, 114, 0.14);
    color: #1ea672;
}

.type-badge[b-5i9fadpkvl] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

    .type-badge .bi[b-5i9fadpkvl] {
        font-size: 0.75rem;
    }

.type-pink[b-5i9fadpkvl] {
    background-color: color-mix(in srgb, var(--brand-pink) 10%, transparent);
    color: var(--brand-pink);
}

.type-purple[b-5i9fadpkvl] {
    background-color: rgba(111, 45, 168, 0.1);
    color: #6f2da8;
}

.type-blue[b-5i9fadpkvl] {
    background-color: rgba(31, 120, 209, 0.1);
    color: #1f78d1;
}

.type-green[b-5i9fadpkvl] {
    background-color: rgba(30, 166, 114, 0.1);
    color: #1ea672;
}

.status-badge[b-5i9fadpkvl] {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-success[b-5i9fadpkvl] {
    background-color: rgba(30, 166, 114, 0.12);
    color: #1ea672;
}

.status-pending[b-5i9fadpkvl] {
    background-color: rgba(241, 158, 27, 0.14);
    color: #b8790f;
}

.status-failed[b-5i9fadpkvl] {
    background-color: rgba(227, 52, 74, 0.12);
    color: #e3344a;
}

.dashboard-divider[b-5i9fadpkvl] {
    margin: 2.5rem 0 1rem;
    border-top: 1px solid var(--surface-border);
}

.dashboard-footer[b-5i9fadpkvl] {
    text-align: center;
    color: var(--surface-text-muted);
    font-size: 0.85rem;
    padding-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .stat-grid[b-5i9fadpkvl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stat-grid[b-5i9fadpkvl] {
        grid-template-columns: 1fr;
    }

    .dashboard-banner[b-5i9fadpkvl] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/WiderpayCoreBankingApp/Components/Pages/Loan/LoanConsole.razor.rz.scp.css */
.ln-page[b-ryees2hah5] {
    --ln-ink: var(--surface-text, #1f1f23);
    --ln-soft: var(--surface-text-muted, #6c757d);
    --ln-line: var(--surface-border, #e2e2e6);
    --ln-line-soft: color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent);
    --ln-card: var(--surface-card-bg, #ffffff);
    --ln-accent: var(--brand-pink, #c2185b);
    --ln-accent-soft: color-mix(in srgb, var(--brand-pink, #c2185b) 10%, transparent);
    --ln-accent-ink: var(--brand-pink-dark, #9b0f47);
    --ln-gold: #d69118;
    --ln-gold-soft: color-mix(in srgb, #d69118 14%, transparent);
    --ln-ok: #2e7d32;
    --ln-ok-soft: color-mix(in srgb, #2e7d32 14%, transparent);
    gap: 16px;
}

.ln-head[b-ryees2hah5] {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:4px;
}
.ln-head h1[b-ryees2hah5] { margin:0 0 4px; font-size:1.5rem; font-weight:800; letter-spacing:-.01em; color:var(--surface-text, #1f1f23); }
.ln-head p[b-ryees2hah5] { margin:0; font-size:.9rem; color:var(--ln-soft); }
.ln-head-progress[b-ryees2hah5] {
    min-width:200px;
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
}
.ln-head-step[b-ryees2hah5] { font-size:.78rem; font-weight:700; color:var(--ln-accent); }
.ln-progressbar[b-ryees2hah5] {
    width:200px;
    height:6px;
    border-radius:999px;
    background:var(--ln-line);
    overflow:hidden;
}
.ln-progressbar span[b-ryees2hah5] {
    display:block;
    height:100%;
    background:var(--ln-accent);
    border-radius:999px;
    transition:width .3s ease;
}
.ln-cash-chip[b-ryees2hah5] {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:700;
    color:var(--ln-accent);
    background:color-mix(in srgb, var(--brand-pink, #c2185b) 12%, transparent);
    border-radius:999px;
    padding:6px 14px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-pink, #c2185b) 20%, transparent);
    min-height:34px;
}

.ln-cash-chip i[b-ryees2hah5] {
    font-size:.9rem;
}

.ln-tabs[b-ryees2hah5] {
    display:flex;
    gap:8px;
    margin-bottom:4px;
    flex-wrap:wrap;
    background:var(--ln-card);
    border:1px solid var(--ln-line);
    border-radius:999px;
    padding:8px;
}
.ln-tab[b-ryees2hah5] {
    padding:10px 16px;
    font-size:.86rem;
    font-weight:600;
    color:var(--ln-soft);
    cursor:pointer;
    border:1px solid transparent;
    background:transparent;
    border-radius:999px;
    display:inline-flex;
    gap:7px;
    align-items:center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ln-tab:hover[b-ryees2hah5] { color:var(--surface-text, #1f1f23); background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent); }
.ln-tab.active[b-ryees2hah5] { color:var(--surface-text, #1f1f23); background:color-mix(in srgb, var(--brand-pink, #c2185b) 12%, transparent); border-color:var(--ln-accent); }

.ln-stepper[b-ryees2hah5] {
    display:flex;
    gap:8px;
    margin-bottom:14px;
    flex-wrap:wrap;
    padding:12px;
    background:var(--ln-card);
    border:1px solid var(--ln-line);
    border-radius:14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .03);
}
.ln-step[b-ryees2hah5] {
    flex:1 1 auto;
    min-width:130px;
    padding:10px 16px;
    text-align:left;
    font-size:.86rem;
    color:var(--ln-soft);
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    display:flex;
    gap:6px;
    align-items:center;
    justify-content:flex-start;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ln-step:hover[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent); }
.ln-step-n[b-ryees2hah5] { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ln-line); color:var(--surface-text, #1f1f23); font-size:.82rem; font-weight:700; flex-shrink:0; }
.ln-step.active[b-ryees2hah5] { color:var(--surface-text, #1f1f23); border-color:var(--ln-accent); background:color-mix(in srgb, var(--brand-pink, #c2185b) 12%, transparent); font-weight:600; }
.ln-step.active .ln-step-n[b-ryees2hah5] { background:var(--ln-accent); color:#fff; }
.ln-step.done .ln-step-n[b-ryees2hah5] { background:var(--ln-ok); color:#fff; }
.ln-step-meta[b-ryees2hah5] { display:flex; flex-direction:column; line-height:1.2; }
.ln-step-sub[b-ryees2hah5] { font-size:.7rem; color:var(--ln-soft); }
.ln-step.active .ln-step-sub[b-ryees2hah5] { color:color-mix(in srgb, var(--brand-pink, #c2185b) 80%, var(--surface-text, #1f1f23)); }

.ln-page .ob-card[b-ryees2hah5] {
    padding:20px 22px;
    border-radius:16px;
    border:1px solid var(--ln-line);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.ln-card-title[b-ryees2hah5] {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.02rem;
    margin:0 0 4px;
    font-weight:700;
    color:var(--surface-text, #1f1f23);
}
.ln-card-title[b-ryees2hah5]::before {
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--ln-accent);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--brand-pink, #c2185b) 12%, transparent);
    flex-shrink:0;
}
.ln-sub[b-ryees2hah5] { font-size:.86rem; color:var(--ln-soft); margin:0 0 16px; }
.ln-h4[b-ryees2hah5] { font-size:.92rem; margin:0 0 10px; font-weight:700; }
.ln-muted[b-ryees2hah5] { color:var(--ln-soft); font-size:.84rem; }

.ln-grid2[b-ryees2hah5] { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.ln-grid3[b-ryees2hah5] { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px 16px; }
.ln-field label[b-ryees2hah5] { display:block; font-size:.76rem; color:var(--ln-soft); margin-bottom:5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ln-input[b-ryees2hah5] {
    width:100%;
    height:42px;
    border:1px solid var(--ln-line);
    border-radius:8px;
    padding:0 12px;
    font-size:.95rem;
    font-family:inherit;
    background:var(--ln-card);
    color:var(--ln-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ln-input:focus[b-ryees2hah5] { outline:none; border-color:var(--ln-accent); box-shadow:0 0 0 3px var(--ln-accent-soft); }
.ln-readonly[b-ryees2hah5] { background:color-mix(in srgb, var(--surface-border, #e2e2e6) 30%, transparent); color:var(--ln-soft); font-weight:700; }
.ln-hint[b-ryees2hah5] { font-size:.76rem; color:var(--ln-soft); margin-top:4px; }
.ln-acct-row[b-ryees2hah5] { display:flex; gap:8px; }
.ln-load-btn[b-ryees2hah5] {
    flex:none;
    height:42px;
    padding:0 14px;
    border:1px solid var(--brand-pink, #c2185b);
    background:var(--ln-accent);
    color:#fff;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}
.ln-load-btn:hover[b-ryees2hah5] { background:var(--ln-accent-ink); border-color:var(--ln-accent-ink); }

.ln-tiles[b-ryees2hah5] { display:flex; gap:12px; flex-wrap:wrap; }
.ln-tile[b-ryees2hah5] {
    flex:1;
    min-width:200px;
    border:1px solid var(--ln-line);
    border-radius:12px;
    padding:16px;
    cursor:pointer;
    background:var(--ln-card);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ln-tile:hover[b-ryees2hah5] { transform:translateY(-1px); box-shadow:0 10px 20px rgba(15, 23, 42, .05); border-color:color-mix(in srgb, var(--brand-pink, #c2185b) 24%, var(--ln-line)); }
.ln-tile.sel[b-ryees2hah5] { border-color:var(--ln-accent); background:color-mix(in srgb, var(--brand-pink, #c2185b) 10%, transparent); }
.ln-tile-h[b-ryees2hah5] { font-weight:700; font-size:.94rem; display:flex; align-items:center; gap:8px; }
.ln-tile-d[b-ryees2hah5] { font-size:.82rem; color:var(--ln-soft); margin-top:3px; }
.ln-tile-ic[b-ryees2hah5] { width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, var(--brand-pink, #c2185b) 14%, transparent); color:var(--ln-accent); display:grid; place-items:center; font-size:.9rem; }

.ln-note[b-ryees2hah5] { border-radius:10px; padding:11px 13px; font-size:.84rem; display:flex; gap:9px; align-items:flex-start; }
.ln-note.info[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent); color:var(--ln-accent-ink); border:1px solid color-mix(in srgb, var(--brand-pink, #c2185b) 22%, transparent); }
.ln-note.warn[b-ryees2hah5] { background:var(--ln-gold-soft); color:#7a5312; border:1px solid #eeddbd; }

.ln-glist[b-ryees2hah5] { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.ln-gitem[b-ryees2hah5] {
    border:1px solid var(--ln-line);
    border-radius:10px;
    padding:11px 13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:color-mix(in srgb, var(--surface-card-bg, #fff) 90%, transparent);
}
.ln-gi-name[b-ryees2hah5] { font-weight:600; }
.ln-gi-meta[b-ryees2hah5] { font-size:.8rem; color:var(--ln-soft); margin-top:2px; }
.ln-chip[b-ryees2hah5] { display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:999px; font-weight:700; background:color-mix(in srgb, var(--brand-pink, #c2185b) 12%, transparent); color:var(--ln-accent-ink); }
.ln-chip.col[b-ryees2hah5] { background:#f0ebff; color:#4f3ca7; }
.ln-icon-btn[b-ryees2hah5] {
    border:1px solid var(--ln-line);
    background:var(--ln-card);
    border-radius:8px;
    height:32px;
    width:32px;
    cursor:pointer;
    color:#b23a3a;
    font-size:.9rem;
}
.ln-icon-btn:hover[b-ryees2hah5] { background:#fbeaea; border-color:#e5b7b7; }
.ln-link[b-ryees2hah5] { color:var(--ln-accent); cursor:pointer; font-weight:600; font-size:.84rem; background:none; border:none; padding:0; }
.ln-link:hover[b-ryees2hah5] { text-decoration:underline; }
.ln-gform[b-ryees2hah5] { margin-top:16px; border-top:1px solid var(--ln-line); padding-top:16px; }
.ln-gform-actions[b-ryees2hah5] { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

.ln-charge-row[b-ryees2hah5] { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--ln-line-soft); }
.ln-charge-row:last-of-type[b-ryees2hah5] { border-bottom:none; }
.ln-charge-name[b-ryees2hah5] { flex:1; }
.ln-charge-name b[b-ryees2hah5] { font-weight:600; }
.ln-charge-name small[b-ryees2hah5] { display:block; color:var(--ln-soft); font-size:.76rem; }
.ln-charge-amt[b-ryees2hah5] { width:130px; text-align:right; font-weight:700; font-size:.92rem; }
.ln-charge-total[b-ryees2hah5] { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:2px solid var(--ln-accent); font-weight:700; }
.ln-ct-amt[b-ryees2hah5] { font-size:1rem; color:var(--ln-accent-ink); }
.ln-switch[b-ryees2hah5] { position:relative; width:42px; height:24px; flex:none; display:inline-block; }
.ln-switch input[b-ryees2hah5] { opacity:0; width:0; height:0; position:absolute; }
.ln-slider[b-ryees2hah5] { position:absolute; inset:0; background:var(--ln-line); border-radius:24px; cursor:pointer; transition:.2s; }
.ln-slider[b-ryees2hah5]::before { content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.ln-switch input:checked + .ln-slider[b-ryees2hah5] { background:var(--ln-accent); }
.ln-switch input:checked + .ln-slider[b-ryees2hah5]::before { transform:translateX(18px); }

.ln-metrics[b-ryees2hah5] { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.ln-metric[b-ryees2hah5] { background:var(--ln-card); border:1px solid var(--ln-line); border-radius:12px; padding:14px 16px; box-shadow: 0 8px 16px rgba(15, 23, 42, .03); }
.ln-ml[b-ryees2hah5] { font-size:.74rem; color:var(--ln-soft); }
.ln-mv[b-ryees2hah5] { font-size:1.05rem; font-weight:700; margin-top:2px; }
.ln-grid-shell[b-ryees2hah5] {
    border:1px solid var(--ln-line);
    border-radius:12px;
    overflow:hidden;
}
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid,
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid .k-grid-header,
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid .k-grid-header-wrap {
    border:none;
    background:transparent;
}
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid .k-grid-header .k-header {
    background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, var(--surface-card-bg, #fff));
    color:var(--ln-soft);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid var(--ln-line);
}
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid td {
    background:transparent;
    border-left:none;
    border-right:none;
    border-bottom:1px solid var(--ln-line-soft);
    color:var(--ln-ink);
    font-size:.84rem;
    vertical-align:middle;
    padding-top:.7rem;
    padding-bottom:.7rem;
}
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid .k-master-row:hover td { background:color-mix(in srgb, var(--brand-pink, #c2185b) 5%, transparent); }
.ln-grid-shell[b-ryees2hah5]  .ln-schedule-grid .k-table-tbody tr:last-child td { border-bottom:none; }
.ln-tbl-wrap[b-ryees2hah5] { border:1px solid var(--ln-line); border-radius:12px; overflow:auto; max-height:340px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.ln-tbl[b-ryees2hah5] { width:100%; border-collapse:collapse; font-size:.84rem; }
.ln-tbl th[b-ryees2hah5], .ln-tbl td[b-ryees2hah5] { padding:9px 12px; text-align:right; }
.ln-tbl th:first-child[b-ryees2hah5], .ln-tbl td:first-child[b-ryees2hah5], .ln-tbl th:nth-child(2)[b-ryees2hah5], .ln-tbl td:nth-child(2)[b-ryees2hah5] { text-align:left; }
.ln-tbl thead th[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, var(--surface-card-bg, #fff)); color:var(--ln-soft); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; }
.ln-tbl tbody tr[b-ryees2hah5] { border-top:1px solid var(--ln-line-soft); }
.ln-tbl tbody tr:hover[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 5%, transparent); }
.ln-tbl tfoot td[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent); color:var(--ln-accent-ink); font-weight:700; border-top:1px solid color-mix(in srgb, var(--brand-pink, #c2185b) 20%, transparent); }

.ln-kv[b-ryees2hah5] { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.9rem; }
.ln-kv dt[b-ryees2hah5] { color:var(--ln-soft); }
.ln-kv dd[b-ryees2hah5] { margin:0; text-align:right; font-weight:600; }
.ln-ledger[b-ryees2hah5] { font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:.82rem; background:linear-gradient(135deg, #0f172a, #132537); color:#cfe4e0; border-radius:10px; padding:14px 16px; overflow-x:auto; border:1px solid rgba(255,255,255,.08); }
.ln-ledger .ln-dr[b-ryees2hah5] { color:#f0c674; }
.ln-ledger .ln-cr[b-ryees2hah5] { color:#8ec07c; }
.ln-ledger .ln-cm[b-ryees2hah5] { color:#6c8a94; }
.ln-ledger .ln-amt[b-ryees2hah5] { float:right; }

.ln-nav[b-ryees2hah5] { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.ln-done[b-ryees2hah5] { text-align:center; padding:34px 22px; }
.ln-done-icon[b-ryees2hah5] { font-size:42px; color:var(--ln-ok); }
.ln-done h2[b-ryees2hah5] { margin:8px 0 4px; font-size:1.1rem; }
.ln-placeholder[b-ryees2hah5] { display:flex; gap:14px; align-items:center; padding:26px; }
.ln-placeholder i[b-ryees2hah5] { font-size:30px; color:var(--ln-accent); }

.ln-list-head[b-ryees2hah5] { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ln-list-actions[b-ryees2hah5] { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ln-filter[b-ryees2hah5] { width:auto; min-width:160px; }
.ln-row-sel[b-ryees2hah5] { background:color-mix(in srgb, var(--brand-pink, #c2185b) 8%, transparent); }
.ln-sweep-row[b-ryees2hah5] { display:flex; gap:12px; align-items:flex-end; margin-top:14px; }
.ln-st[b-ryees2hah5] { font-size:.72rem; padding:2px 8px; border-radius:999px; font-weight:700; background:color-mix(in srgb, var(--surface-border, #e2e2e6) 70%, transparent); color:var(--ln-soft); white-space:nowrap; }
.ln-st.ok[b-ryees2hah5] { background:var(--ln-ok-soft); color:#1f5c39; }
.ln-st.pending[b-ryees2hah5] { background:var(--ln-line-soft); color:var(--ln-soft); }
.ln-st.due[b-ryees2hah5] { background:var(--ln-gold-soft); color:#7a5312; }
.ln-st.bad[b-ryees2hah5] { background:#fbeaea; color:#7d2626; }
.ln-perf[b-ryees2hah5] { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--ln-ok-soft); color:#1f5c39; white-space:nowrap; }
.ln-perf.watch[b-ryees2hah5] { background:var(--ln-gold-soft); color:#7a5312; }
.ln-perf.substandard[b-ryees2hah5], .ln-perf.doubtful[b-ryees2hah5], .ln-perf.loss[b-ryees2hah5] { background:#fbeaea; color:#7d2626; }

@media (max-width:760px) { .ln-grid2[b-ryees2hah5], .ln-grid3[b-ryees2hah5] { grid-template-columns:1fr; } .ln-metrics[b-ryees2hah5] { grid-template-columns:1fr 1fr; } }

@media (max-width:760px) {
    .ln-head-progress[b-ryees2hah5] { min-width:100%; align-items:flex-start; }
    .ln-progressbar[b-ryees2hah5] { width:100%; }
}

@media (prefers-color-scheme: dark) {
    .ln-page[b-ryees2hah5] { --ln-ink:#e6eef0; --ln-soft:#9fb2ba; --ln-line:#2b3a42; --ln-line-soft:#222f36; --ln-card:#16232a; --ln-accent:#c2185b; --ln-accent-soft:#3a1830; --ln-accent-ink:#f3b0ca; }
    .ln-input[b-ryees2hah5] { background:#16232a; color:var(--ln-ink); }
    .ln-tile[b-ryees2hah5], .ln-metric[b-ryees2hah5], .ln-gitem[b-ryees2hah5] { background:#16232a; }
}
/* _content/WiderpayCoreBankingApp/Components/Pages/NipManager.razor.rz.scp.css */
/* NIP transactions page — reuses the shared .ob-* look-and-feel and the app CSS
   variables (--surface-*, --brand-pink) so it matches the rest of the application. */

.nip-header[b-vvwuwsjfqt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nip-header-text h1[b-vvwuwsjfqt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.nip-header-text p[b-vvwuwsjfqt] {
    margin: 4px 0 0;
    color: var(--surface-text-muted);
    font-size: .9rem;
}

/* ---------- KPI tiles ---------- */
.nip-kpis[b-vvwuwsjfqt] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.nip-kpi[b-vvwuwsjfqt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
}

.nip-kpi-label[b-vvwuwsjfqt] {
    color: var(--surface-text-muted);
    font-size: .8rem;
    font-weight: 600;
}

.nip-kpi-value[b-vvwuwsjfqt] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.nip-kpi-ok[b-vvwuwsjfqt] { color: #66bb6a; }
.nip-kpi-wait[b-vvwuwsjfqt] { color: #ffca28; }

.nip-kpi-hint[b-vvwuwsjfqt] {
    color: var(--surface-text-muted);
    font-size: .76rem;
}

/* ---------- filter bar ---------- */
.nip-filters[b-vvwuwsjfqt] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
}

.nip-filter-field[b-vvwuwsjfqt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.nip-filter-grow[b-vvwuwsjfqt] { flex: 1 1 220px; }

.nip-filter-field label[b-vvwuwsjfqt] {
    color: var(--surface-text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.nip-filter-actions[b-vvwuwsjfqt] {
    display: flex;
    align-items: flex-end;
}

/* ---------- grid cells ---------- */
.nip-cell-primary[b-vvwuwsjfqt] { font-weight: 600; }
.nip-cell-sub[b-vvwuwsjfqt] { color: var(--surface-text-muted); font-size: .78rem; }

.nip-narration[b-vvwuwsjfqt] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.nip-requery[b-vvwuwsjfqt] { padding: 6px 12px; font-size: .82rem; }
.nip-requery:hover[b-vvwuwsjfqt] { border-color: var(--brand-pink); color: var(--brand-pink); }

@media (max-width: 980px) {
    .nip-kpis[b-vvwuwsjfqt] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .nip-kpis[b-vvwuwsjfqt] { grid-template-columns: 1fr; }
    .nip-filter-field[b-vvwuwsjfqt] { min-width: 100%; }
}
/* _content/WiderpayCoreBankingApp/Components/Pages/Onboarding/CustomerInfo.razor.rz.scp.css */
.customer-grid-wrapper[b-ac7erlp108] {
    position: relative;
}
/* _content/WiderpayCoreBankingApp/Components/Pages/Onboarding/Tier1Customers.razor.rz.scp.css */
/* Styles for this page now live in the shared, non-scoped wwwroot/css/onboarding.css
   (the .ob-* classes), so Tier 1 and Tier 2 share one source of truth. */
/* _content/WiderpayCoreBankingApp/Components/Pages/Transactions.razor.rz.scp.css */
.tx-layout[b-71il18e4x6] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

.tx-toolbar[b-71il18e4x6] {
    margin-bottom: 8px;
}

/* The LoaderContainer overlays its nearest positioned ancestor, so anchor it here. */
.tx-grid-wrap[b-71il18e4x6] {
    position: relative;
}

@media (max-width: 1100px) {
    .tx-layout[b-71il18e4x6] {
        grid-template-columns: 1fr;
    }
}
/* _content/WiderpayCoreBankingApp/Components/Shared/ChatPanel.razor.rz.scp.css */
.chat-card[b-cqzj5kb677] {
    display: flex;
    flex-direction: column;
    height: 480px;
    width: 100%;
}

[b-cqzj5kb677] .k-card-body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
}

.chat-scroll[b-cqzj5kb677] {
    height: 100%;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-row[b-cqzj5kb677] {
    display: flex;
    width: 100%;
}

.chat-row.mine[b-cqzj5kb677] {
    justify-content: flex-end;
}

.chat-row.theirs[b-cqzj5kb677] {
    justify-content: flex-start;
}

.chat-bubble[b-cqzj5kb677] {
    max-width: 72%;
    padding: 8px 12px;
    border-radius: 14px;
    background: #f1f1f3;
    color: #1b1b1f;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.chat-row.mine .chat-bubble[b-cqzj5kb677] {
    background: var(--brand-pink, #d6336c);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-row.theirs .chat-bubble[b-cqzj5kb677] {
    border-bottom-left-radius: 4px;
}

.chat-author[b-cqzj5kb677] {
    font-size: .72rem;
    font-weight: 600;
    opacity: .8;
    margin-bottom: 2px;
}

.chat-text[b-cqzj5kb677] {
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-time[b-cqzj5kb677] {
    font-size: .65rem;
    opacity: .65;
    text-align: right;
    margin-top: 2px;
}

.chat-typing[b-cqzj5kb677] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-typing-label[b-cqzj5kb677] {
    font-size: .8rem;
    opacity: .7;
}

.chat-empty[b-cqzj5kb677] {
    text-align: center;
    color: #888;
    margin: auto;
    padding: 24px;
}

.chat-input[b-cqzj5kb677] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    width: 100%;
}

[b-cqzj5kb677] .chat-textarea {
    flex: 1 1 auto;
}