@import '_content/LP.UI.Shared/LP.UI.Shared.m2s36af9og.bundle.scp.css';

/* /UIComponants/Accounts/DebtorsAgeAnalysis.razor.rz.scp.css */
.debtors-toolbar[b-za2ejwp3ki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Stacked Sum / Avg / Min / Max in each aged-category footer cell. */
.agg-footer[b-za2ejwp3ki] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.78rem;
}

/* Left-hand labels column lines up with the four stacked values. */
.agg-footer.agg-labels[b-za2ejwp3ki] {
    align-items: flex-start;
    color: #6b7280;
    font-weight: 600;
}

/* Count of tenants with a balance, above the Sum/Avg/Min/Max labels. */
.agg-count[b-za2ejwp3ki] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0e2141;
    margin-bottom: 0.25rem;
}
/* /UIComponants/Accounts/FinanceAccountLedger.razor.rz.scp.css */
.ledger-toolbar[b-xv71bnvt9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Whole-ledger control totals under the grid: Opening (top), the debit/credit movement,
   then Closing (bottom) — right-aligned to sit under the numeric columns. */
.ledger-summary[b-xv71bnvt9c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.ledger-summary-movement[b-xv71bnvt9c] {
    display: flex;
    gap: 1.5rem;
    color: #0e2141;
}
/* /UIComponants/DocumentWorkspace/DocumentWorkspace.razor.rz.scp.css */
.doc-ws-subtitle[b-d22u0aah6p] {
    margin: 0.25rem 0 0;
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 0.9rem;
}

.doc-ws-status[b-d22u0aah6p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--kendo-color-info, #3b82f6);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.08);
    font-size: 0.88rem;
}

.doc-ws-toolbar[b-d22u0aah6p] {
    margin-bottom: 0.5rem;
}

/* Per-subject controls row (picker + name/type + lifecycle buttons). */
.doc-ws-subject[b-d22u0aah6p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0.2rem;
}

.doc-ws-field[b-d22u0aah6p] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.doc-ws-field > label[b-d22u0aah6p] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kendo-color-subtle, #4b5563);
}

.doc-ws-placeholders[b-d22u0aah6p] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.doc-ws-status-chip[b-d22u0aah6p] {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kendo-color-subtle, #4b5563);
    background: var(--kendo-color-surface-alt, #f3f4f6);
}

/* Bounded host for the embedded BlockEditor (which fills its container). */
.doc-ws-editor-host[b-d22u0aah6p] {
    height: calc(100vh - 360px);
    min-height: 28rem;
    margin: 0.5rem 0;
}

/* Document-level action footer (stubbed). */
.doc-ws-canvas-actions[b-d22u0aah6p] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--kendo-color-border, #e5e7eb);
    background: var(--kendo-color-surface-alt, #f9fafb);
    border-radius: 0 0 6px 6px;
}
/* /UIComponants/LandingChrome.razor.rz.scp.css */
/* ==========================================================================
   Landing chrome — toolbar + nav for the public front door.

   The palette is restated here rather than imported. LandingPage.razor.css
   declares its tokens on `.landing`, which is a different component in a
   different project, and Blazor scoped CSS gives each component its own
   attribute — so nothing of that scope reaches this file. These values mirror
   it deliberately; change one and change the other.
   ========================================================================== */
/* This app has no global border-box. app.css's `*` rule sets margin and padding and stops there, so
   everything defaults to content-box and anything with `width: 100%` plus padding stands proud of
   its container. The sign-in input did exactly that — 284px inside a 260px popup, 24px over the
   edge.

   Scoped to the chrome, not fixed on the one element: the next control with a width and a padding
   would land the same way, and the button beside it only escaped because Telerik's reset happens to
   cover <button> — which is not something to rely on. Not made global either; changing box-sizing
   app-wide would reflow every page in it.

   Widths below are therefore OUTER widths now, and are set to keep the panels the size they were. */
.lc-header[b-55pxrgr5s9],
.lc-header *[b-55pxrgr5s9],
.lc-header *[b-55pxrgr5s9]::before,
.lc-header *[b-55pxrgr5s9]::after {
    box-sizing: border-box;
}

.lc-header[b-55pxrgr5s9] {
    --lc-accent-cyan: #38bdf8;
    --lc-accent-indigo: #6366f1;
    --lc-ink: #e2e8f0;
    --lc-ink-dim: #94a3b8;
    --lc-ink-strong: #f8fafc;

    position: sticky;
    top: 0;
    z-index: 50;

    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--lc-ink);

    /* Translucent over the landing's own gradient rather than opaque: the page
       scrolls beneath it, and a solid bar would cut the backdrop in half. */
    background: rgba(11, 18, 32, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

/* ==========================================================================
   TOP TOOLBAR
   ========================================================================== */
.lc-toolbar[b-55pxrgr5s9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lc-brand[b-55pxrgr5s9] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--lc-ink-strong);
}

/* Sized by height only. The wordmark is much wider than it is tall, and
   constraining the width crushes it — the same trap the login logo hit. */
.lc-brand-logo[b-55pxrgr5s9] {
    height: 30px;
    width: auto;
    display: block;
}

.lc-brand-name[b-55pxrgr5s9] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lc-toolbar-end[b-55pxrgr5s9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ==========================================================================
   AVATAR
   ========================================================================== */
.lc-avatar-wrap[b-55pxrgr5s9] {
    position: relative;
}

.lc-avatar-btn[b-55pxrgr5s9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--lc-ink);
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.3);
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.lc-avatar-btn:hover[b-55pxrgr5s9] {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}

.lc-avatar-btn:focus-visible[b-55pxrgr5s9] {
    outline: 2px solid var(--lc-accent-cyan);
    outline-offset: 2px;
}

.lc-avatar-btn-known[b-55pxrgr5s9] {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border-color: transparent;
    color: #0b1220;
}

.lc-avatar-icon[b-55pxrgr5s9] {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.lc-avatar-initials[b-55pxrgr5s9] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   POPUP (avatar)
   ========================================================================== */
.lc-popup[b-55pxrgr5s9] {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 2;
    /* Outer width now that this subtree is border-box — was 260px of content inside 34px of
       padding and border, so 294px is the size it has been rendering at all along. */
    width: 294px;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.lc-popup-head[b-55pxrgr5s9] {
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.lc-popup-name[b-55pxrgr5s9] {
    display: block;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--lc-ink-strong);
}

.lc-popup-sub[b-55pxrgr5s9] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--lc-ink-dim);
}

/* Shared by the anchor in the signed-in branch and the submit button in the sign-in form, so the
   two read as the same control. `border: none` and `font: inherit` are for the button half — a
   <button> brings its own chrome and its own font, and without these it would sit visibly apart
   from the <a> it is meant to match. */
.lc-popup-action[b-55pxrgr5s9] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: 9px;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 200ms ease;
}

/* ── Sign-in form ── */
.lc-signin-form[b-55pxrgr5s9] {
    display: grid;
    gap: 0.85rem;
}

.lc-field[b-55pxrgr5s9] {
    display: grid;
    gap: 0.3rem;
}

.lc-field-label[b-55pxrgr5s9] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lc-ink);
}

.lc-field-optional[b-55pxrgr5s9] {
    font-weight: 400;
    color: var(--lc-ink-dim);
}

.lc-field-input[b-55pxrgr5s9] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.08);
    color: var(--lc-ink-strong);
    font-family: inherit;
    font-size: 0.88rem;
}

.lc-field-input[b-55pxrgr5s9]::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.lc-field-input:focus[b-55pxrgr5s9] {
    outline: none;
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(56, 189, 248, 0.08);
}

.lc-popup-foot[b-55pxrgr5s9] {
    display: block;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--lc-ink-dim);
}

.lc-popup-action-primary[b-55pxrgr5s9] {
    color: #0b1220;
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
}

.lc-popup-action-primary:hover[b-55pxrgr5s9] {
    filter: brightness(1.07);
}

/* Sign out, under "Go to my workspace". Quiet rather than primary — leaving is the exception on this
   page. It is here at all because the landing chrome is the only surface every signed-in user can
   reach: /portal renders outside the router without MainLayout, so it carries no avatar menu and
   offers no other way out. */
.lc-popup-form[b-55pxrgr5s9] {
    margin-top: 0.5rem;
}

.lc-popup-action-quiet[b-55pxrgr5s9] {
    color: var(--lc-ink-dim);
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.lc-popup-action-quiet:hover[b-55pxrgr5s9] {
    color: var(--lc-ink-strong);
    background: rgba(148, 163, 184, 0.18);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.lc-nav[b-55pxrgr5s9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.lc-nav-group[b-55pxrgr5s9] {
    position: relative;
}

.lc-nav-link[b-55pxrgr5s9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem 0.5rem;
    border-radius: 9px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 550;
    color: var(--lc-ink-dim);
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* The accent underline, drawn from the centre outwards on hover and held open while a menu is.
   It carries the page's cyan→indigo gradient rather than a flat colour, so the nav reads as part of
   the same design as the hero buttons instead of neutral chrome bolted above it.

   Collapsed by keeping left and right both at 50%, so there is nothing to see until it animates —
   scaleX would work too but would blur the gradient at rest on some displays. */
.lc-nav-link[b-55pxrgr5s9]::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lc-accent-cyan), var(--lc-accent-indigo));
    transition: left 200ms ease, right 200ms ease;
}

.lc-nav-link:hover[b-55pxrgr5s9],
.lc-nav-link:focus-visible[b-55pxrgr5s9] {
    color: var(--lc-accent-cyan);
    background: rgba(56, 189, 248, 0.1);
}

.lc-nav-link:hover[b-55pxrgr5s9]::after,
.lc-nav-link:focus-visible[b-55pxrgr5s9]::after,
.lc-nav-link-open[b-55pxrgr5s9]::after {
    left: 0.7rem;
    right: 0.7rem;
}

.lc-nav-link:focus-visible[b-55pxrgr5s9] {
    outline: 2px solid var(--lc-accent-cyan);
    outline-offset: 2px;
}

/* Held state for the open menu: the same accent, but committed rather than hinted — solid tint and
   a visible edge, so it is obvious which item owns the panel below it. */
.lc-nav-link-open[b-55pxrgr5s9] {
    color: var(--lc-accent-cyan);
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.4);
}

.lc-caret[b-55pxrgr5s9] {
    width: 14px;
    height: 14px;
    transition: rotate 200ms ease;
}

.lc-caret-open[b-55pxrgr5s9] {
    rotate: 180deg;
}

/* ==========================================================================
   SUBMENU (products)
   ========================================================================== */
.lc-submenu[b-55pxrgr5s9] {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 2;
    /* Outer, as above: 290px of content plus 0.5rem padding each side and a 1px border. */
    min-width: 308px;
    padding: 0.5rem;
    display: grid;
    gap: 0.15rem;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.lc-submenu-item[b-55pxrgr5s9] {
    display: block;
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: background 180ms ease;
}

.lc-submenu-item:hover[b-55pxrgr5s9],
.lc-submenu-item:focus-visible[b-55pxrgr5s9] {
    background: rgba(56, 189, 248, 0.14);
    outline: none;
}

/* The name takes the accent on hover, matching the nav item that opened the panel. */
.lc-submenu-item:hover .lc-submenu-name[b-55pxrgr5s9],
.lc-submenu-item:focus-visible .lc-submenu-name[b-55pxrgr5s9] {
    color: var(--lc-accent-cyan);
}

.lc-submenu-name[b-55pxrgr5s9] {
    display: block;
    font-size: 0.92rem;
    font-weight: 620;
    color: var(--lc-ink-strong);
}

.lc-submenu-blurb[b-55pxrgr5s9] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--lc-ink-dim);
}

/* ==========================================================================
   DISMISSAL OVERLAY
   Fixed and transparent, sitting under the panels but over everything else, so
   the next click anywhere closes the menu instead of acting on the page.
   ========================================================================== */
.lc-overlay[b-55pxrgr5s9] {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 560px) {
    /* Panels are border-box now, so these caps are outer widths and must not exceed the viewport. */
    .lc-toolbar[b-55pxrgr5s9] {
        padding: 0.6rem 1rem;
    }

    .lc-nav[b-55pxrgr5s9] {
        padding: 0 1rem 0.5rem;
    }

    /* The wordmark is the first thing to go: the avatar is the control, and the
       logo still identifies the site. */
    .lc-brand-name[b-55pxrgr5s9] {
        display: none;
    }

    .lc-submenu[b-55pxrgr5s9] {
        min-width: min(308px, calc(100vw - 2rem));
    }

    .lc-popup[b-55pxrgr5s9] {
        width: min(294px, calc(100vw - 2rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-avatar-btn[b-55pxrgr5s9],
    .lc-nav-link[b-55pxrgr5s9],
    .lc-nav-link[b-55pxrgr5s9]::after,
    .lc-caret[b-55pxrgr5s9],
    .lc-submenu-item[b-55pxrgr5s9],
    .lc-popup-action[b-55pxrgr5s9] {
        transition: none;
    }
}
/* /UIComponants/PlatformOwners/PlatformOwnerDetailsAuditTrail.razor.rz.scp.css */


/* ── Section controls row: ShowHideSection left, EndUserSnippet button right ── */
.section-controls-row[b-ry9zhu3pqd] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Dissolve the EndUserSnippet wrapper so its children become direct grid items */
.section-controls-row[b-ry9zhu3pqd]  .end-user-snippet {
    display: contents;
}

/* ShowHideSection occupies column 1, row 1 */
.section-controls-row[b-ry9zhu3pqd]  .show-hide-section {
    grid-column: 1;
    grid-row: 1;
}

/* EndUserSnippet toggle button pinned to far right */
.section-controls-row[b-ry9zhu3pqd]  .end-user-snippet-toggle {
    grid-column: 2;
    grid-row: 1;
}

/* Expanded content drops below, spanning the full container width */
.section-controls-row[b-ry9zhu3pqd]  .end-user-snippet-body {
    grid-column: 1 / -1;
    grid-row: 2;
}

.lable-format-top[b-ry9zhu3pqd]{
    --base-clr: #1E1C59;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--base-clr);
    display: inline-block;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
.lable-format[b-ry9zhu3pqd] {
    --base-clr: #1E1C59;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--base-clr);
    display: inline-block;
    margin-top: 0.8rem;
    margin-bottom: 0.1rem;
}

[b-ry9zhu3pqd] .center-header-text {
    text-align: center;
    justify-content: center;
}

.po-logo-img[b-ry9zhu3pqd] {
    width: 50px;
    height: auto;
    object-fit: contain;
}
/* /UIComponants/PlatformOwners/PlatformOwnerDetailsLayout.razor.rz.scp.css */
/* ═════════════════════════════
   Platform Owner Details Layout
   ═════════════════════════════ */

/* ── Section controls row: ShowHideSection left, EndUserSnippet button right ── */
.section-controls-row[b-n3n059ssa9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
}

    /* Dissolve the EndUserSnippet wrapper so its children become direct grid items */
    .section-controls-row[b-n3n059ssa9]  .end-user-snippet {
        display: contents;
    }

    /* ShowHideSection occupies column 1, row 1 */
    .section-controls-row[b-n3n059ssa9]  .show-hide-section {
        grid-column: 1;
        grid-row: 1;
    }

    /* EndUserSnippet toggle button pinned to far right */
    .section-controls-row[b-n3n059ssa9]  .end-user-snippet-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    /* Expanded content drops below, spanning the full container width */
    .section-controls-row[b-n3n059ssa9]  .end-user-snippet-body {
        grid-column: 1 / -1;
        grid-row: 2;
    }

[b-n3n059ssa9] .app-card-color {
    background-color: #E3EEF9;
    color: #153B61;
}


.page-internal-component[b-n3n059ssa9] {
    --snm-label-size: 0.72rem;
    background-color: white;
    padding: 0.5rem;
}

.lable-format-top[b-n3n059ssa9] {
    --base-clr: #1E1C59;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--base-clr);
    display: inline-block;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

.lable-format[b-n3n059ssa9] {
    --base-clr: #1E1C59;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--base-clr);
    display: inline-block;
    margin-top: 0.8rem;
    margin-bottom: 0.1rem;
}

.po-card-title[b-n3n059ssa9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1E1C59;
}

.po-logo-preview[b-n3n059ssa9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 0.5rem;
    border: 1px dashed #BDC4CB;
    border-radius: 4px;
    background-color: #FAFBFC;
}

.po-logo-img[b-n3n059ssa9] {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
}
/* /UIComponants/PlatformOwners/PlatformOwnerDetailsModal.razor.rz.scp.css */
/* ════════════════════════════
   Platform Owner Details Modal
   ════════════════════════════ */

/* ── Window chrome ── */
[b-asmosvh6wj] .k-window.window-container {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #F7F9F9 !important;
    border-radius: 5px;
}

[b-asmosvh6wj] .k-window.window-container .k-window-titlebar {
    margin: 0 !important;
    padding: 0 !important;
}

[b-asmosvh6wj] .k-window.window-container .k-window-title {
    overflow: visible !important;
}

[b-asmosvh6wj] .k-window.window-container .k-window-content {
    padding: 0 !important;
    background-color: #F7F9F9 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.podm-body[b-asmosvh6wj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #E4E4E4;
    margin: 0.75rem 0.5rem 0.5rem 0.5rem;
}

.podm-toolbar[b-asmosvh6wj] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    background-color: white;
   /* background-color: #F7F9F9*/
    border: 1px solid #E4E4E4;
    margin: 0.75rem 0.5rem 0.5rem 0.5rem;
}

[b-asmosvh6wj] .page-internal-component .k-card + .k-card {
    margin-top: 1.5rem;
}

.page-container[b-asmosvh6wj] {
    --snm-gutter: 1.0rem;
    background-color: #F7F9F9;
    display: flex;
    flex-direction: column;
    gap: var(--snm-gutter);
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
}

.page-section[b-asmosvh6wj] {
    --snm-label-size: 0.72rem;
    background-color: white;
    padding: 0.5rem;
    margin: .5rem;
    box-shadow: 0 2px 2px #ccc;
}
/* /UIComponants/PlatformOwners/PlatformOwnerManager.razor.rz.scp.css */
/* Aspect toolbar: Edit/Create button above the PanelBar */
.po-aspect-toolbar[b-f0ntzfmu5j] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* PanelBar header content (icon + title) */
.po-panel-header[b-f0ntzfmu5j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1E1C59;
}

/* /UIComponants/Portal/ProductPortal.razor.rz.scp.css */
/* Product portal — a tenant user's launcher for the products they subscribe to. */

.portal[b-8ug7mbx8u0] {
    padding: 2rem clamp(1rem, 4vw, 3rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Header now carries the sign-out beside the title, so it is a row rather than a block. Wraps on a
   narrow viewport rather than shrinking the button — this is the only exit from the page and it must
   stay reachable at every width. */
.portal-header[b-8ug7mbx8u0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.portal-header-text[b-8ug7mbx8u0] {
    min-width: 0;
}

.portal-signout[b-8ug7mbx8u0] {
    margin: 0;
    flex: none;
}

.portal-signout-button[b-8ug7mbx8u0] {
    padding: 0.5rem 0.95rem;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.portal-signout-button:hover[b-8ug7mbx8u0],
.portal-signout-button:focus-visible[b-8ug7mbx8u0] {
    opacity: 1;
}

.portal-title[b-8ug7mbx8u0] {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
}

.portal-subtitle[b-8ug7mbx8u0] {
    margin: 0;
    opacity: 0.75;
}

.portal-state[b-8ug7mbx8u0] {
    margin: 0;
    opacity: 0.8;
}

.portal-state-error[b-8ug7mbx8u0] {
    color: #b3261e;
}

.portal-empty[b-8ug7mbx8u0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.portal-empty-link[b-8ug7mbx8u0] {
    font-weight: 600;
}

/* auto-fit + minmax rather than fixed columns: one product fills the row neatly, a dozen wrap,
   and no breakpoint has to be maintained as the catalogue grows. */
.portal-grid[b-8ug7mbx8u0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.portal-card[b-8ug7mbx8u0] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.portal-card:not(.portal-card-disabled):hover[b-8ug7mbx8u0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Disabled = subscribed, but the product has no AppBaseUrl configured yet. Still shown, because the
   entitlement is real and hiding it would look like the subscription is missing. */
.portal-card-disabled[b-8ug7mbx8u0] {
    opacity: 0.6;
}

.portal-card-body[b-8ug7mbx8u0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.portal-card-name[b-8ug7mbx8u0] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
}

.portal-card-description[b-8ug7mbx8u0] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.8;
}

.portal-card-action[b-8ug7mbx8u0] {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    background: #0b5fff;
    color: #fff;
}

.portal-card-action:hover[b-8ug7mbx8u0] {
    text-decoration: none;
}

.portal-card-action-disabled[b-8ug7mbx8u0] {
    background: transparent;
    color: inherit;
    border: 1px dashed currentColor;
    cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
    .portal-card[b-8ug7mbx8u0] {
        border-color: rgba(255, 255, 255, 0.14);
    }
}
/* /UIComponants/SystemAdmin/Dashboard.razor.rz.scp.css */
.admin-dashboard-page[b-3u9ileyouq] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-3u9ileyouq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1[b-3u9ileyouq] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
}

.header-actions[b-3u9ileyouq] {
    display: flex;
    gap: 1rem;
}

/* Metrics Grid */
.metrics-grid[b-3u9ileyouq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card .k-card-body[b-3u9ileyouq] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.metric-icon[b-3u9ileyouq] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon.primary[b-3u9ileyouq] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.metric-icon.success[b-3u9ileyouq] {
    background-color: #e8f5e9;
    color: #388e3c;
}

.metric-icon.warning[b-3u9ileyouq] {
    background-color: #fff3e0;
    color: #f57c00;
}

.metric-icon.error[b-3u9ileyouq] {
    background-color: #ffebee;
    color: #d32f2f;
}

.metric-content[b-3u9ileyouq] {
    flex: 1;
}

.metric-content h3[b-3u9ileyouq] {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 600;
}

.metric-content p[b-3u9ileyouq] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.metric-content small[b-3u9ileyouq] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Quick Actions */
.quick-actions-grid[b-3u9ileyouq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-button[b-3u9ileyouq] {
    height: 80px;
    flex-direction: column;
    gap: 0.5rem;
}

.action-button span[b-3u9ileyouq] {
    font-size: 0.875rem;
}

/* Content Grid */
.content-grid[b-3u9ileyouq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
}

/* Status List */
.status-list[b-3u9ileyouq] {
    margin-top: 1rem;
}

.status-item[b-3u9ileyouq] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.status-item:last-child[b-3u9ileyouq] {
    border-bottom: none;
}

.status-name[b-3u9ileyouq] {
    font-weight: 500;
}

.status-count[b-3u9ileyouq] {
    color: #666;
    font-size: 0.875rem;
}

/* Plans List */
.plans-list .plan-summary-item[b-3u9ileyouq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.plans-list .plan-summary-item:last-child[b-3u9ileyouq] {
    border-bottom: none;
}

.plan-info strong[b-3u9ileyouq] {
    display: block;
    margin-bottom: 0.25rem;
}

.plan-pricing[b-3u9ileyouq] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

/* Alerts List */
.alerts-list .alert-item[b-3u9ileyouq] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s;
}

.alerts-list .alert-item:hover[b-3u9ileyouq] {
    background-color: #f5f5f5;
}

.alerts-list .alert-item:last-child[b-3u9ileyouq] {
    border-bottom: none;
}

.alerts-list .alert-item.warning[b-3u9ileyouq] {
    border-left-color: #f57c00;
}

.alerts-list .alert-item.error[b-3u9ileyouq] {
    border-left-color: #d32f2f;
}

.alerts-list .alert-item.info[b-3u9ileyouq] {
    border-left-color: #1976d2;
}

.alert-icon[b-3u9ileyouq] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-item.warning .alert-icon[b-3u9ileyouq] {
    color: #f57c00;
}

.alert-item.error .alert-icon[b-3u9ileyouq] {
    color: #d32f2f;
}

.alert-item.info .alert-icon[b-3u9ileyouq] {
    color: #1976d2;
}

.alert-content[b-3u9ileyouq] {
    flex: 1;
}

.alert-content strong[b-3u9ileyouq] {
    display: block;
    margin-bottom: 0.25rem;
}

.alert-content p[b-3u9ileyouq] {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
}

.alert-content small[b-3u9ileyouq] {
    font-size: 0.75rem;
}

.empty-state[b-3u9ileyouq] {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.empty-state .k-icon[b-3u9ileyouq] {
    margin-bottom: 1rem;
    color: #4caf50;
}

/* Card title: place icon + text on left, action button pinned to the right.
   Use absolute positioning for the action button so it's robust to Telerik's nested output. */
.card-title-with-action[b-3u9ileyouq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;               /* container for absolutely positioned button */
    padding-right: 5.5rem;            /* space for the button on the right (adjust if needed) */
    min-width: 0;
}

/* Left group (icon + text) */
.card-title-left[b-3u9ileyouq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;                     /* allow truncation if needed */
}

/* Icon inside the left group: cover SVG and common Telerik icon outputs */
.card-title-left > svg[b-3u9ileyouq],
.card-title-left .k-icon[b-3u9ileyouq],
.card-title-left .telerik-svg-icon[b-3u9ileyouq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-title-with-action .card-title-text[b-3u9ileyouq] {
    font-weight: 600;
    display: inline-block;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pin known button outputs to the right edge of the container.
   Cover common cases: our custom class, Telerik rendered .k-button or native button element. */
.card-title-with-action .view-all-button[b-3u9ileyouq],
.card-title-with-action .view-all-button.k-button[b-3u9ileyouq],
.card-title-with-action .k-button[b-3u9ileyouq],
.card-title-with-action button[b-3u9ileyouq] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    z-index: 1;
}

/* Fallback: if the button is nested inside an extra wrapper, target the last child and position it */
.card-title-with-action > *:last-child[b-3u9ileyouq] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-dashboard-page[b-3u9ileyouq] {
        padding: 1rem;
    }

    .page-header[b-3u9ileyouq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .metrics-grid[b-3u9ileyouq] {
        grid-template-columns: 1fr;
    }

    .content-grid[b-3u9ileyouq] {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid[b-3u9ileyouq] {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .card-title-with-action[b-3u9ileyouq] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .card-title-with-action .view-all-button[b-3u9ileyouq],
    .card-title-with-action .k-button[b-3u9ileyouq] {
        margin-left: 0;
        width: 100%;
    }

    .card-title-left[b-3u9ileyouq] {
        width: 100%;
    }

    .card-title-with-action > *:last-child[b-3u9ileyouq] {
        margin-left: 0;
    }
}

/* /UIComponants/SystemAdmin/SecurityManager.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.security-manager[b-dt5ezm1l2u] {
    padding: 0.5rem 0 2rem;
}

/* ── Two-column layout ────────────────────────────────────────────────── */
.security-layout[b-dt5ezm1l2u] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.roles-panel[b-dt5ezm1l2u] {
    flex: 0 0 320px;
    min-width: 260px;
}

.matrix-panel[b-dt5ezm1l2u] {
    flex: 1;
    min-width: 0;
}

/* ── Roles panel header ───────────────────────────────────────────────── */
.panel-header[b-dt5ezm1l2u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.panel-header h3[b-dt5ezm1l2u] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.panel-hint[b-dt5ezm1l2u] {
    font-size: 0.75rem;
    color: #757575;
    margin: 0;
}

/* ── Role name cell ───────────────────────────────────────────────────── */
.role-name-cell[b-dt5ezm1l2u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lock-icon[b-dt5ezm1l2u] {
    color: #9e9e9e;
    flex-shrink: 0;
}

.dot-active[b-dt5ezm1l2u]  { color: #4caf50; font-size: 0.7rem; }
.dot-inactive[b-dt5ezm1l2u] { color: #f44336; font-size: 0.7rem; }

/* ── Matrix panel header ──────────────────────────────────────────────── */
.matrix-header[b-dt5ezm1l2u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.matrix-header h3[b-dt5ezm1l2u] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.role-desc[b-dt5ezm1l2u] {
    font-size: 0.8rem;
    color: #757575;
    margin: 0.2rem 0 0;
}

/* ── System-role warning banner ───────────────────────────────────────── */
.system-role-banner[b-dt5ezm1l2u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    color: #e65100;
    font-size: 0.875rem;
}

/* ── Preset buttons row ───────────────────────────────────────────────── */
.preset-row[b-dt5ezm1l2u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.preset-label[b-dt5ezm1l2u] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #616161;
    white-space: nowrap;
}

.preset-btn[b-dt5ezm1l2u] {
    font-size: 0.78rem !important;
}

/* ── Permission matrix table ──────────────────────────────────────────── */
.matrix-scroll[b-dt5ezm1l2u] {
    overflow-x: auto;
}

.perm-matrix[b-dt5ezm1l2u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.th-resource[b-dt5ezm1l2u] {
    text-align: left;
    padding: 0.55rem 0.75rem;
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    min-width: 160px;
    white-space: nowrap;
}

.th-action[b-dt5ezm1l2u] {
    text-align: center;
    padding: 0.55rem 0.4rem;
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    min-width: 72px;
    white-space: nowrap;
}

.td-resource[b-dt5ezm1l2u] {
    padding: 0.55rem 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    color: #424242;
    transition: color 0.15s;
}

.row-active .td-resource[b-dt5ezm1l2u] {
    color: #1565c0;
}

.td-perm[b-dt5ezm1l2u] {
    text-align: center;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid #f0f0f0;
}

.na-dash[b-dt5ezm1l2u] {
    color: #bdbdbd;
    font-size: 0.85rem;
    user-select: none;
}

/* Row hover feedback */
.perm-matrix tbody tr:hover[b-dt5ezm1l2u] {
    background: #fafafa;
}

/* Selected role row highlight (applied via OnRowRender) */
[b-dt5ezm1l2u] .row-selected td {
    background-color: #e3f2fd !important;
    font-weight: 500;
}

/* ── Matrix footer actions ────────────────────────────────────────────── */
.matrix-footer[b-dt5ezm1l2u] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

/* ── No-selection placeholder ─────────────────────────────────────────── */
.no-selection[b-dt5ezm1l2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 420px;
    color: #bdbdbd;
    gap: 0.75rem;
    font-size: 0.95rem;
}

/* ── Add-role dialog form ─────────────────────────────────────────────── */
.form-grid[b-dt5ezm1l2u] {
    display: grid;
    gap: 1rem;
}

.form-group[b-dt5ezm1l2u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label[b-dt5ezm1l2u] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
}

.full-width[b-dt5ezm1l2u] {
    grid-column: 1 / -1;
}

/* ── Responsive: stack vertically on narrow screens ───────────────────── */
@media (max-width: 900px) {
    .security-layout[b-dt5ezm1l2u] {
        flex-direction: column;
    }

    .roles-panel[b-dt5ezm1l2u] {
        flex: none;
        width: 100%;
    }

    .matrix-panel[b-dt5ezm1l2u] {
        width: 100%;
    }
}
/* /UIComponants/SystemAdmin/UserAccessManager.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.user-access-page[b-4vbgo1y6st] {
    padding: 0.5rem 0 2rem;
}

/* ── Card toolbar ─────────────────────────────────────────────────────── */
.card-toolbar[b-4vbgo1y6st] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-count[b-4vbgo1y6st] {
    font-size: 0.8rem;
    color: #757575;
    font-weight: 500;
}

/* ── User name cell ───────────────────────────────────────────────────── */
.user-name-cell[b-4vbgo1y6st] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-fullname[b-4vbgo1y6st] {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.2;
}

.user-username[b-4vbgo1y6st] {
    font-size: 0.75rem;
    color: #9e9e9e;
}

/* ── Avatar ───────────────────────────────────────────────────────────── */
.avatar[b-4vbgo1y6st] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-lg[b-4vbgo1y6st] {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Role chips (grid column) ─────────────────────────────────────────── */
.role-chips[b-4vbgo1y6st] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.role-chip[b-4vbgo1y6st] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.chip-default[b-4vbgo1y6st]  { background: #e3f2fd; color: #1565c0; }
.chip-warning[b-4vbgo1y6st]  { background: #fff8e1; color: #e65100; border: 1px solid #ffcc02; }
.chip-expired[b-4vbgo1y6st]  { background: #fce4ec; color: #b71c1c; text-decoration: line-through; }
.chip-more[b-4vbgo1y6st]     { background: #f5f5f5; color: #757575; }

/* ── Dialog: user info bar ────────────────────────────────────────────── */
.dialog-user-bar[b-4vbgo1y6st] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.dialog-user-info[b-4vbgo1y6st] {
    flex: 1;
    min-width: 0;
}

.dui-name[b-4vbgo1y6st] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.dui-email[b-4vbgo1y6st] {
    font-size: 0.85rem;
    color: #616161;
    margin-bottom: 0.4rem;
}

.dui-meta[b-4vbgo1y6st] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #757575;
}

.dui-tenant[b-4vbgo1y6st], .dui-lastlogin[b-4vbgo1y6st] {
    font-size: 0.75rem;
    color: #9e9e9e;
}

.dui-2fa[b-4vbgo1y6st] {
    font-size: 0.72rem;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

/* ── Section labels ───────────────────────────────────────────────────── */
.section-label[b-4vbgo1y6st] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
    margin-bottom: 0.6rem;
}

/* ── No-roles hint ────────────────────────────────────────────────────── */
.no-roles-hint[b-4vbgo1y6st] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #9e9e9e;
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 6px;
    border: 1px dashed #e0e0e0;
}

/* ── Roles table ──────────────────────────────────────────────────────── */
.roles-table[b-4vbgo1y6st] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.roles-table th[b-4vbgo1y6st] {
    text-align: left;
    padding: 0.45rem 0.6rem;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.78rem;
    color: #616161;
    border-bottom: 2px solid #e0e0e0;
}

.roles-table td[b-4vbgo1y6st] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.td-rolename[b-4vbgo1y6st] {
    font-weight: 500;
}

.td-meta[b-4vbgo1y6st] {
    font-size: 0.78rem;
    color: #757575;
    line-height: 1.5;
}

.td-date[b-4vbgo1y6st] {
    font-size: 0.72rem;
    color: #9e9e9e;
}

.td-expiry[b-4vbgo1y6st] {
    font-size: 0.78rem;
}

.expiry-none[b-4vbgo1y6st]    { color: #bdbdbd; }
.expiry-normal[b-4vbgo1y6st]  { color: #424242; }
.expiry-soon[b-4vbgo1y6st]    { color: #e65100; font-weight: 500; display: flex; align-items: center; gap: 0.3rem; }
.expiry-expired[b-4vbgo1y6st] { color: #b71c1c; font-weight: 500; }

.row-expiring td[b-4vbgo1y6st] { background: #fffde7; }
.row-expired  td[b-4vbgo1y6st] { background: #fce4ec; opacity: 0.8; }

/* ── Add role form ────────────────────────────────────────────────────── */
.add-role-form[b-4vbgo1y6st] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.arf-field[b-4vbgo1y6st] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.arf-field label[b-4vbgo1y6st] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.arf-role[b-4vbgo1y6st] {
    flex: 2;
    min-width: 200px;
}

.arf-expiry[b-4vbgo1y6st] {
    flex: 1;
    min-width: 180px;
}

.arf-assign[b-4vbgo1y6st] {
    padding-bottom: 0.05rem;
}

.no-expiry-hint[b-4vbgo1y6st] {
    font-size: 0.78rem;
    color: #9e9e9e;
    padding: 0.5rem 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .add-role-form[b-4vbgo1y6st] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /UIComponants/TenantAdmin/Dashboard.razor.rz.scp.css */
page-container[b-33gdrl7brd] {
    padding-top: 1rem;
    padding-left: 0;
    /*background-image: url(Images/MoneyTraxPattern.png);
    background-repeat: no-repeat;
    background-size: 352px 255px;
    background-position: right 0px top 0px;*/
}

app-card-color[b-33gdrl7brd] {
    background-color: lightskyblue; /* Your hex code here */
    color: midnightblue; /* Your text color here */
}


.page-components[b-33gdrl7brd] {
    padding-top: 1rem;
    padding-left: 0;
    padding-bottom: 1rem;
}
/* /UIComponants/TenantAdmin/TenantSecurityManager.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.security-manager[b-j9h1c7vwsi] {
    padding: 0.5rem 0 2rem;
}

/* ── Two-column layout ────────────────────────────────────────────────── */
.security-layout[b-j9h1c7vwsi] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.roles-panel[b-j9h1c7vwsi] {
    flex: 0 0 300px;
    min-width: 240px;
}

.matrix-panel[b-j9h1c7vwsi] {
    flex: 1;
    min-width: 0;
}

/* ── Roles panel header ───────────────────────────────────────────────── */
.panel-header[b-j9h1c7vwsi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.panel-header h3[b-j9h1c7vwsi] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.panel-hint[b-j9h1c7vwsi] {
    font-size: 0.75rem;
    color: #757575;
    margin: 0;
}

/* ── Role name cell ───────────────────────────────────────────────────── */
.role-name-cell[b-j9h1c7vwsi] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lock-icon[b-j9h1c7vwsi] {
    color: #9e9e9e;
    flex-shrink: 0;
}

.dot-active[b-j9h1c7vwsi]  { color: #4caf50; font-size: 0.7rem; }
.dot-inactive[b-j9h1c7vwsi] { color: #f44336; font-size: 0.7rem; }

/* ── Matrix panel header ──────────────────────────────────────────────── */
.matrix-header[b-j9h1c7vwsi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.matrix-header h3[b-j9h1c7vwsi] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.role-desc[b-j9h1c7vwsi] {
    font-size: 0.8rem;
    color: #757575;
    margin: 0.2rem 0 0;
}

/* ── System-role warning banner ───────────────────────────────────────── */
.system-role-banner[b-j9h1c7vwsi] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    color: #e65100;
    font-size: 0.875rem;
}

/* ── Preset buttons row ───────────────────────────────────────────────── */
.preset-row[b-j9h1c7vwsi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.preset-label[b-j9h1c7vwsi] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #616161;
    white-space: nowrap;
}

.preset-btn[b-j9h1c7vwsi] {
    font-size: 0.78rem !important;
}

/* ── Permission matrix table ──────────────────────────────────────────── */
.matrix-scroll[b-j9h1c7vwsi] {
    overflow-x: auto;
}

.perm-matrix[b-j9h1c7vwsi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.th-resource[b-j9h1c7vwsi] {
    text-align: left;
    padding: 0.55rem 0.75rem;
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    min-width: 160px;
    white-space: nowrap;
}

.th-action[b-j9h1c7vwsi] {
    text-align: center;
    padding: 0.55rem 0.4rem;
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    min-width: 72px;
    white-space: nowrap;
}

.td-resource[b-j9h1c7vwsi] {
    padding: 0.55rem 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    color: #424242;
    transition: color 0.15s;
}

.row-active .td-resource[b-j9h1c7vwsi] {
    color: #1565c0;
}

.td-perm[b-j9h1c7vwsi] {
    text-align: center;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid #f0f0f0;
}

.na-dash[b-j9h1c7vwsi] {
    color: #bdbdbd;
    font-size: 0.85rem;
    user-select: none;
}

.perm-matrix tbody tr:hover[b-j9h1c7vwsi] {
    background: #fafafa;
}

[b-j9h1c7vwsi] .row-selected td {
    background-color: #e3f2fd !important;
    font-weight: 500;
}

/* ── Matrix footer actions ────────────────────────────────────────────── */
.matrix-footer[b-j9h1c7vwsi] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

/* ── No-selection placeholder ─────────────────────────────────────────── */
.no-selection[b-j9h1c7vwsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 420px;
    color: #bdbdbd;
    gap: 0.75rem;
    font-size: 0.95rem;
}

/* ── Add-role dialog form ─────────────────────────────────────────────── */
.form-grid[b-j9h1c7vwsi] {
    display: grid;
    gap: 1rem;
}

.form-group[b-j9h1c7vwsi] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label[b-j9h1c7vwsi] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
}

.full-width[b-j9h1c7vwsi] {
    grid-column: 1 / -1;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .security-layout[b-j9h1c7vwsi] {
        flex-direction: column;
    }

    .roles-panel[b-j9h1c7vwsi] {
        flex: none;
        width: 100%;
    }

    .matrix-panel[b-j9h1c7vwsi] {
        width: 100%;
    }
}
/* /UIComponants/TenantAdmin/TenantUserAccess.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.user-access-page[b-2furxu87b3] {
    padding: 0.5rem 0 2rem;
}

/* ── Card toolbar ─────────────────────────────────────────────────────── */
.card-toolbar[b-2furxu87b3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-count[b-2furxu87b3] {
    font-size: 0.8rem;
    color: #757575;
    font-weight: 500;
}

/* ── User name cell ───────────────────────────────────────────────────── */
.user-name-cell[b-2furxu87b3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-fullname[b-2furxu87b3] {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.2;
}

.user-username[b-2furxu87b3] {
    font-size: 0.75rem;
    color: #9e9e9e;
}

/* ── Avatar ───────────────────────────────────────────────────────────── */
.avatar[b-2furxu87b3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-lg[b-2furxu87b3] {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Role chips (grid column) ─────────────────────────────────────────── */
.role-chips[b-2furxu87b3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.role-chip[b-2furxu87b3] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.chip-default[b-2furxu87b3]  { background: #e3f2fd; color: #1565c0; }
.chip-warning[b-2furxu87b3]  { background: #fff8e1; color: #e65100; border: 1px solid #ffcc02; }
.chip-expired[b-2furxu87b3]  { background: #fce4ec; color: #b71c1c; text-decoration: line-through; }
.chip-more[b-2furxu87b3]     { background: #f5f5f5; color: #757575; }

/* ── Dialog: user info bar ────────────────────────────────────────────── */
.dialog-user-bar[b-2furxu87b3] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.dialog-user-info[b-2furxu87b3] {
    flex: 1;
    min-width: 0;
}

.dui-name[b-2furxu87b3] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.dui-email[b-2furxu87b3] {
    font-size: 0.85rem;
    color: #616161;
    margin-bottom: 0.4rem;
}

.dui-meta[b-2furxu87b3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #757575;
}

.dui-lastlogin[b-2furxu87b3] {
    font-size: 0.75rem;
    color: #9e9e9e;
}

.dui-2fa[b-2furxu87b3] {
    font-size: 0.72rem;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

/* ── Section labels ───────────────────────────────────────────────────── */
.section-label[b-2furxu87b3] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
    margin-bottom: 0.6rem;
}

/* ── No-roles hint ────────────────────────────────────────────────────── */
.no-roles-hint[b-2furxu87b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #9e9e9e;
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 6px;
    border: 1px dashed #e0e0e0;
}

/* ── Roles table ──────────────────────────────────────────────────────── */
.roles-table[b-2furxu87b3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.roles-table th[b-2furxu87b3] {
    text-align: left;
    padding: 0.45rem 0.6rem;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.78rem;
    color: #616161;
    border-bottom: 2px solid #e0e0e0;
}

.roles-table td[b-2furxu87b3] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.td-rolename[b-2furxu87b3] {
    font-weight: 500;
}

.td-meta[b-2furxu87b3] {
    font-size: 0.78rem;
    color: #757575;
    line-height: 1.5;
}

.td-date[b-2furxu87b3] {
    font-size: 0.72rem;
    color: #9e9e9e;
}

.td-expiry[b-2furxu87b3] {
    font-size: 0.78rem;
}

.expiry-none[b-2furxu87b3]    { color: #bdbdbd; }
.expiry-normal[b-2furxu87b3]  { color: #424242; }
.expiry-soon[b-2furxu87b3]    { color: #e65100; font-weight: 500; display: flex; align-items: center; gap: 0.3rem; }
.expiry-expired[b-2furxu87b3] { color: #b71c1c; font-weight: 500; }

.row-expiring td[b-2furxu87b3] { background: #fffde7; }
.row-expired  td[b-2furxu87b3] { background: #fce4ec; opacity: 0.8; }

/* ── Add role form ────────────────────────────────────────────────────── */
.add-role-form[b-2furxu87b3] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.arf-field[b-2furxu87b3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.arf-field label[b-2furxu87b3] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.arf-role[b-2furxu87b3] {
    flex: 2;
    min-width: 200px;
}

.arf-expiry[b-2furxu87b3] {
    flex: 1;
    min-width: 180px;
}

.arf-assign[b-2furxu87b3] {
    padding-bottom: 0.05rem;
}

.no-expiry-hint[b-2furxu87b3] {
    font-size: 0.78rem;
    color: #9e9e9e;
    padding: 0.5rem 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .add-role-form[b-2furxu87b3] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /UIComponants/TenantAdmin/WorkflowConfiguration.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.workflow-config-page[b-ln7vtsk04c] {
    padding: 0.5rem 0 2rem;
}

/* ── Card header ──────────────────────────────────────────────────────── */
.wf-card-header[b-ln7vtsk04c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.wf-title[b-ln7vtsk04c] {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
}

.wf-subtitle[b-ln7vtsk04c] {
    margin: 0;
    font-size: 0.8rem;
    color: #757575;
    max-width: 680px;
}

/* ── Workflow table ───────────────────────────────────────────────────── */
.wf-table[b-ln7vtsk04c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.wf-table th[b-ln7vtsk04c] {
    text-align: left;
    padding: 0.55rem 0.6rem;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.78rem;
    color: #616161;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.wf-table td[b-ln7vtsk04c] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.th-order[b-ln7vtsk04c]    { width: 44px; text-align: center; }
.th-name[b-ln7vtsk04c]     { min-width: 200px; }
.th-role[b-ln7vtsk04c]     { min-width: 160px; }
.th-mode[b-ln7vtsk04c]     { width: 110px; }
.th-deadline[b-ln7vtsk04c] { width: 90px; }
.th-flags[b-ln7vtsk04c]    { width: 76px; text-align: center; }
.th-actions[b-ln7vtsk04c]  { width: 160px; }

.td-order[b-ln7vtsk04c]    { text-align: center; }
.td-flags[b-ln7vtsk04c]    { text-align: center; }

/* ── Row states ───────────────────────────────────────────────────────── */
.wf-row-locked[b-ln7vtsk04c] {
    background: #fafafa;
    opacity: 0.85;
}

.wf-row-inactive td[b-ln7vtsk04c] {
    opacity: 0.55;
}

.wf-table tbody tr:not(.wf-row-locked):hover[b-ln7vtsk04c] {
    background: #f5f9ff;
}

/* ── Step order number ────────────────────────────────────────────────── */
.step-order[b-ln7vtsk04c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.lock-icon[b-ln7vtsk04c] {
    color: #9e9e9e;
}

/* ── Step name ────────────────────────────────────────────────────────── */
.step-name[b-ln7vtsk04c] {
    font-weight: 500;
}

.step-name-locked[b-ln7vtsk04c] {
    font-weight: 500;
    color: #757575;
}

.step-platform-tag[b-ln7vtsk04c] {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
    background: #f0f0f0;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* ── Role badge ───────────────────────────────────────────────────────── */
.role-badge[b-ln7vtsk04c] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    background: #e8f5e9;
    color: #2e7d32;
    white-space: nowrap;
}

/* ── Mode badge ───────────────────────────────────────────────────────── */
.mode-badge[b-ln7vtsk04c] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.mode-sequential[b-ln7vtsk04c] { background: #e3f2fd; color: #1565c0; }
.mode-parallel[b-ln7vtsk04c]   { background: #f3e5f5; color: #6a1b9a; }

/* ── N/A text ─────────────────────────────────────────────────────────── */
.na-text[b-ln7vtsk04c] {
    color: #bdbdbd;
    font-size: 0.85rem;
}

/* ── Flag icon ────────────────────────────────────────────────────────── */
.flag-yes[b-ln7vtsk04c] {
    color: #4caf50;
}

/* ── Action buttons ───────────────────────────────────────────────────── */
.action-btns[b-ln7vtsk04c] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* ── Workflow footer (save/discard) ───────────────────────────────────── */
.wf-footer[b-ln7vtsk04c] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

/* ── Step form (dialog) ───────────────────────────────────────────────── */
.step-form[b-ln7vtsk04c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sf-group[b-ln7vtsk04c] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sf-group label[b-ln7vtsk04c] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sf-flags[b-ln7vtsk04c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sf-flags label[b-ln7vtsk04c] {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
/* /UIComponants/Tenants/TenantDetails.razor.rz.scp.css */
/* Identity bar — tenant name, status badge, edit button at the top of the body. */
.tenant-identity[b-3q7j7d32vs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.tenant-identity h1[b-3q7j7d32vs] {
    margin: 0 0 0.25rem 0;
}

.header-actions[b-3q7j7d32vs] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* PanelBar header content (icon + title). Mirrors PlatformOwner's .po-panel-header. */
.td-panel-header[b-3q7j7d32vs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1E1C59;
}

/* Overview aspect — stat cards across the top, two detail cards below. */
.stats-grid[b-3q7j7d32vs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-grid h3[b-3q7j7d32vs] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: var(--kendo-color-primary);
}

.details-grid[b-3q7j7d32vs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.details-list[b-3q7j7d32vs] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
}

.details-list dt[b-3q7j7d32vs] {
    font-weight: 600;
    color: #6c757d;
}

.details-list dd[b-3q7j7d32vs] {
    margin: 0;
}

/* Subscription History timeline. */
.subscription-timeline[b-3q7j7d32vs] {
    padding: 0;
    max-width: 800px;
}

.timeline-item[b-3q7j7d32vs] {
    display: flex;
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item:last-child .marker-line[b-3q7j7d32vs] {
    display: none;
}

.timeline-item:last-child[b-3q7j7d32vs] {
    padding-bottom: 0;
}

.timeline-marker[b-3q7j7d32vs] {
    position: relative;
    margin-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.marker-dot[b-3q7j7d32vs] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--kendo-color-primary);
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--kendo-color-primary);
    z-index: 1;
    flex-shrink: 0;
}

.marker-line[b-3q7j7d32vs] {
    width: 2px;
    flex: 1;
    background-color: #dee2e6;
    margin-top: 8px;
    min-height: 50px;
}

.timeline-content[b-3q7j7d32vs] {
    flex: 1;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.timeline-content:hover[b-3q7j7d32vs] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: var(--kendo-color-primary);
}

.timeline-header[b-3q7j7d32vs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.timeline-header strong[b-3q7j7d32vs] {
    color: #212529;
    font-size: 1rem;
}

.timeline-header small[b-3q7j7d32vs] {
    font-size: 0.875rem;
    white-space: nowrap;
    margin-left: 1rem;
}

.timeline-body p[b-3q7j7d32vs] {
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Utility classes used in aspect bodies. */
.mt-2[b-3q7j7d32vs] { margin-top: 0.5rem; }
.mt-3[b-3q7j7d32vs] { margin-top: 1rem; }
.mt-4[b-3q7j7d32vs] { margin-top: 1.5rem; }
.mb-0[b-3q7j7d32vs] { margin-bottom: 0; }
.text-muted[b-3q7j7d32vs] { color: #6c757d; }
/* /UIComponants/WorkflowItems/MyWorkItemsManager.razor.rz.scp.css */
/* ── Workspace PanelBar ──────────────────────────────────────────────────── */
/* Panel header: icon + title on one baseline (mirrors PlatformOwner's .po-panel-header). */
.wf-panel-header[b-5dz9ygvjam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Inline workflow-component host ──────────────────────────────────────────
   Rendered in place of a panel's grid while an item is being worked/reviewed. */
.wf-worker-host[b-5dz9ygvjam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Top bar: "Back to list" + a Working/Reviewing label so users know which item is open. */
.wf-worker-bar[b-5dz9ygvjam] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #D6DBE1;
}

.wf-worker-title[b-5dz9ygvjam] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E1C59;
}

/* ── Notes & Comments popup ─────────────────────────────────────────────── */
.notes-popup[b-5dz9ygvjam] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notes-section-label[b-5dz9ygvjam] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1E1C59;
    margin-bottom: 0.35rem;
}

/* Read-only history of existing notes, newest first; scrolls when long. */
.notes-history[b-5dz9ygvjam] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.note-entry[b-5dz9ygvjam] {
    border: 1px solid #D6DBE1;
    border-radius: 4px;
    background-color: #F7F9FC;
    padding: 0.5rem 0.6rem;
}

.note-entry-meta[b-5dz9ygvjam] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: #5A6472;
    margin-bottom: 0.25rem;
}

.note-entry-type[b-5dz9ygvjam] {
    font-weight: 600;
}

.note-entry-text[b-5dz9ygvjam] {
    white-space: pre-wrap;
    word-break: break-word;
    color: #153B61;
}

.notes-empty[b-5dz9ygvjam] {
    font-size: 0.8rem;
    color: #5A6472;
    font-style: italic;
    margin: 0;
}

/* New-note input row: textarea takes the space, the voice mic sits alongside it. */
.notes-add-input[b-5dz9ygvjam] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .notes-add-input > :first-child[b-5dz9ygvjam] {
        flex: 1 1 auto;
    }

    .notes-add-input[b-5dz9ygvjam]  .voice-to-data-btn {
        flex: 0 0 auto;
    }
/* /UIComponants/Workspaces/Leadership/LeadershipDashboard.razor.rz.scp.css */
.leadership-panel-header[b-awaedv9zvo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /UIComponants/Workspaces/Sales/SalesPlanShowcase.razor.rz.scp.css */
/* Responsive deck: cards flow left-to-right and wrap. The card owns its own
   width (max 360px); this just spaces and aligns them. */
.plan-card-deck[b-u18k5gaqg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.5rem;
    padding-top: 1rem;
}

.showcase-loading[b-u18k5gaqg4] {
    padding: 1rem 0;
    color: #56557d;
    font-size: 0.95rem;
}

/* Replaces the old manual Approve button: approval is now workflow-driven. */
.approval-via-workflow[b-u18k5gaqg4] {
    color: #56557d;
    font-size: 0.85rem;
    font-style: italic;
}
/* /UIInfrastructure/AccessDenied.razor.rz.scp.css */
.access-denied[b-gfkyje4l6i] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.access-denied-card[b-gfkyje4l6i] {
    max-width: 460px;
    padding: 2.25rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(100, 116, 139, 0.22);
    border-radius: 16px;
}

.access-denied-icon[b-gfkyje4l6i] {
    width: 42px;
    height: 42px;
    color: #64748b;
}

.access-denied-card h1[b-gfkyje4l6i] {
    margin: 1rem 0 0;
    font-size: 1.35rem;
    font-weight: 650;
}

.access-denied-card p[b-gfkyje4l6i] {
    margin: 0.6rem 0 0;
    color: #64748b;
    line-height: 1.55;
}

.access-denied-action[b-gfkyje4l6i] {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 9px;
    background: #1E1C59;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}

.access-denied-action:hover[b-gfkyje4l6i] {
    filter: brightness(1.12);
}
/* /UIInfrastructure/LayoutComponents/Login.razor.rz.scp.css */
/* ==========================================================================
   Login page � modern glass-card design
   ========================================================================== */

/* width:100% + padding on the card/inputs would overflow (and force a horizontal
   scrollbar) under the default content-box model — box-sizing isn't inherited. */
.login-page[b-onsspo3605],
.login-page *[b-onsspo3605],
.login-page *[b-onsspo3605]::before,
.login-page *[b-onsspo3605]::after {
    box-sizing: border-box;
}

.login-page[b-onsspo3605] {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #e2e8f0;
    animation: login-fade-in-b-onsspo3605 420ms ease-out both;
}

@keyframes login-fade-in-b-onsspo3605 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Card ---------- */
.login-card[b-onsspo3605] {
    width: 100%;
    padding: 2.5rem 2.25rem 2rem;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---------- Logo ---------- */
.login-logo-wrapper[b-onsspo3605] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
}

/* Sized by WIDTH, not a fixed square. The brand mark is a landscape wordmark (641x227, ~2.8:1);
   the previous 72x72 box made object-fit shrink it to fit the 72px width, so it rendered only 25px
   tall and looked tiny. Constraining width and letting height follow keeps the full aspect ratio,
   and the % cap keeps it inside the card padding on narrow screens. */
.login-logo[b-onsspo3605] {
    width: min(240px, 75%);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(56, 189, 248, 0.35));
}

/* ---------- Heading ---------- */
.login-title[b-onsspo3605] {
    margin: 0;
    text-align: center;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #f8fafc;
}

.login-subtitle[b-onsspo3605] {
    margin: -0.5rem 0 0.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* This is the first <h1> on the page, so Blazor's <FocusOnNavigate Selector="h1"/>
   focuses it on load. Suppress the global h1:focus-visible accent outline — the
   title isn't interactive; focus still moves here for assistive tech, just unstyled. */
.login-title:focus[b-onsspo3605],
.login-title:focus-visible[b-onsspo3605] {
    outline: none;
}

/* ---------- Form ---------- */
.login-form[b-onsspo3605] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.25rem;
}

.login-field[b-onsspo3605] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.login-field label[b-onsspo3605] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #cbd5e1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.login-input[b-onsspo3605] {
    width: 100%;
    padding: 0.75rem 0.95rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    font-size: 0.95rem;
    color: #f1f5f9;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    font-family: inherit;
}

.login-input[b-onsspo3605]::placeholder {
    color: #64748b;
}

.login-input:hover[b-onsspo3605] {
    border-color: rgba(148, 163, 184, 0.45);
}

.login-input:focus[b-onsspo3605] {
    outline: none;
    border-color: #38bdf8;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

.login-input:autofill[b-onsspo3605],
.login-input:-webkit-autofill[b-onsspo3605] {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.9) inset;
    caret-color: #f1f5f9;
}

/* ---------- Error ---------- */
.login-error[b-onsspo3605] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #fecaca;
    font-size: 0.85rem;
    animation: login-shake-b-onsspo3605 360ms ease;
}

.login-error-icon[b-onsspo3605] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: #f87171;
}

@keyframes login-shake-b-onsspo3605 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ---------- Action buttons ---------- */
.login-actions[b-onsspo3605] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.login-btn[b-onsspo3605] {
    flex: 1;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
    letter-spacing: 0.02em;
}

.login-btn:active[b-onsspo3605] {
    transform: translateY(1px);
}

.login-btn:focus-visible[b-onsspo3605] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35);
}

.login-submit-btn[b-onsspo3605] {
    border: none;
    color: #0b1220;
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    box-shadow: 0 10px 25px -10px rgba(56, 189, 248, 0.55);
}

.login-submit-btn:hover[b-onsspo3605] {
    box-shadow: 0 14px 30px -8px rgba(99, 102, 241, 0.55);
    filter: brightness(1.05);
}

.login-cancel-btn[b-onsspo3605] {
    background: transparent;
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.28);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-cancel-btn:hover[b-onsspo3605] {
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.55);
    background: rgba(148, 163, 184, 0.08);
}

/* ---------- Footer ---------- */
.login-footer[b-onsspo3605] {
    font-size: 0.78rem;
    color: #64748b;
    letter-spacing: 0.03em;
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .login-card[b-onsspo3605] {
        padding: 2rem 1.4rem 1.6rem;
        border-radius: 14px;
    }

    .login-title[b-onsspo3605] {
        font-size: 1.4rem;
    }

    .login-actions[b-onsspo3605] {
        flex-direction: column-reverse;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .login-page[b-onsspo3605],
    .login-error[b-onsspo3605] {
        animation: none;
    }

    .login-btn[b-onsspo3605] {
        transition: none;
    }
}
/* /UIInfrastructure/LayoutComponents/NavMenu.razor.rz.scp.css */


/* NavMenu isolated styles */
/* ═══════════════════════════════════════════════
   NavMenu / Sidebar – global reusable component
   All values driven by --nav-* variables in :root
   ═══════════════════════════════════════════════ */

.nav-sidebar[b-9peu40lniu] {
    width: var(--nav-width);
    transition: width var(--nav-transition);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 100;
    background: var(--nav-bg-clr);
    overflow: hidden;
}

    .nav-sidebar[b-9peu40lniu]::-webkit-scrollbar {
        width: 8px;
        background: var(--nav-bg-clr);
    }

    .nav-sidebar[b-9peu40lniu]::-webkit-scrollbar-thumb {
        background: var(--nav-active-clr);
        border-radius: 4px;
    }

        .nav-sidebar[b-9peu40lniu]::-webkit-scrollbar-thumb:hover {
            background: var(--accent-clr);
        }

    .nav-sidebar.collapsed[b-9peu40lniu] {
        width: var(--nav-width-collapsed);
    }

        .nav-sidebar.collapsed .nav-sidebar-header[b-9peu40lniu] {
            justify-content: center;
        }

        .nav-sidebar.collapsed .nav-sidebar-logo[b-9peu40lniu] {
            display: none;
        }

        .nav-sidebar.collapsed .nav-toggle-btn[b-9peu40lniu] {
            margin-left: 0;
        }

        .nav-sidebar.collapsed .nav-sidebar-link[b-9peu40lniu],
        .nav-sidebar.collapsed .nav-dropdown-btn[b-9peu40lniu] {
            justify-content: center;
        }

            /* for NavLink-rendered anchors */
            .nav-sidebar.collapsed[b-9peu40lniu]  .nav-sidebar-link span,
            .nav-sidebar.collapsed .nav-dropdown-btn span[b-9peu40lniu],
            .nav-sidebar.collapsed .nav-dropdown-btn svg:last-child[b-9peu40lniu] {
                display: none;
            }

        .nav-sidebar.collapsed .nav-sub-menu[b-9peu40lniu] {
            max-height: 0;
            overflow: hidden;
        }

/* Header */
.nav-sidebar-header[b-9peu40lniu] {
    display: flex;
    align-items: center;
    height: var(--sb-height);
    min-height: var(--sb-height);
    margin-bottom: 16px;
    padding-inline: var(--nav-link-padding);
    border-bottom: var(--nav-header-border);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nav-bg-clr);
}

.nav-sidebar-logo[b-9peu40lniu] {
    height: var(--nav-logo-height);
    width: auto;
    object-fit: contain;
    flex-grow: 1;
}

.nav-toggle-btn[b-9peu40lniu] {
    margin-left: auto;
    padding: 0.5em;
    border: 1.5px solid transparent;
    border-radius: var(--nav-link-radius);
    background: none;
    cursor: pointer;
}

    .nav-toggle-btn svg[b-9peu40lniu] {
        transition: rotate 150ms ease;
        fill: var(--nav-icon-clr);
    }

    .nav-toggle-btn:hover[b-9peu40lniu] {
        background-color: var(--nav-hover-bg);
        border: 1.5px solid var(--nav-hover-border-clr);
    }

    .nav-toggle-btn.rotated svg[b-9peu40lniu] {
        rotate: 180deg;
    }

/* List */
.nav-sidebar-list[b-9peu40lniu] {
    list-style: none;
    padding: 0.35rem 0.5rem;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-active-clr) var(--nav-bg-clr);
}

.nav-sidebar-item[b-9peu40lniu] {
    font-family: "Metrophobic";
    font-size: 1rem;
    list-style: none;
}

    .nav-sidebar-item + .nav-sidebar-item[b-9peu40lniu] {
        margin-top: 0.35rem;
    }

/* include both native links and NavLink-rendered anchors */
.nav-sidebar-link[b-9peu40lniu],
.nav-dropdown-btn[b-9peu40lniu],
[b-9peu40lniu] .nav-sidebar-link {
    position: relative;
    border-radius: var(--nav-link-radius);
    padding: 0.5em 0.75em;
    text-decoration: none;
    color: var(--nav-text-clr);
    display: flex;
    align-items: center;
    gap: 0.5em;
    box-sizing: border-box;
    border: none;
}

    .nav-sidebar-link[b-9peu40lniu]::after,
    .nav-dropdown-btn[b-9peu40lniu]::after,
    [b-9peu40lniu] .nav-sidebar-link::after,
    .nav-sub-menu .nav-sidebar-link[b-9peu40lniu]::after,
    .nav-sub-menu[b-9peu40lniu]  .nav-sidebar-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.175rem;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        height: 0.05rem;
        background-color: var(--base-2nd-clr);
        border-radius: 999px;
    }

    .nav-sidebar-link svg[b-9peu40lniu],
    .nav-dropdown-btn svg[b-9peu40lniu],
    [b-9peu40lniu] .nav-sidebar-link svg {
        flex-shrink: 0;
        fill: var(--nav-icon-clr);
    }

    .nav-sidebar-link span[b-9peu40lniu],
    .nav-dropdown-btn span[b-9peu40lniu],
    [b-9peu40lniu] .nav-sidebar-link span {
        flex-grow: 1;
    }

    .nav-sidebar-link:hover[b-9peu40lniu],
    .nav-dropdown-btn:hover[b-9peu40lniu],
    [b-9peu40lniu] .nav-sidebar-link:hover {
        background-color: var(--nav-hover-bg);
        border: 1.5px solid var(--nav-hover-border-clr);
    }

    .nav-sidebar-link.active[b-9peu40lniu],
    [b-9peu40lniu] .nav-sidebar-link.active {
        color: var(--nav-active-clr);
    }

        .nav-sidebar-link.active svg[b-9peu40lniu],
        [b-9peu40lniu] .nav-sidebar-link.active svg {
            fill: var(--nav-active-clr);
        }

/* Dropdown */
.nav-dropdown-btn[b-9peu40lniu] {
    width: 100%;
    text-align: left;
    background: none;
    font: inherit;
    cursor: pointer;
}

    .nav-dropdown-btn svg:last-child[b-9peu40lniu] {
        transition: rotate 200ms ease;
    }

    .nav-dropdown-btn.rotated svg:last-child[b-9peu40lniu] {
        rotate: 180deg;
    }

/* Submenu */
.nav-sub-menu[b-9peu40lniu] {
    list-style: none;
    padding: 0.25rem 0 0.25rem 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--nav-transition);
}

    .nav-sub-menu.show[b-9peu40lniu] {
        max-height: 1200px;
    }

    .nav-sub-menu li + li[b-9peu40lniu] {
        margin-top: 0.25rem;
    }

    .nav-sub-menu .nav-sidebar-link[b-9peu40lniu],
    .nav-sub-menu[b-9peu40lniu]  .nav-sidebar-link {
        position: relative;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 2em;
        gap: 0.5em;
        border: none;
    }

/* Icons */
.nav-icon[b-9peu40lniu] {
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
}

/* Mobile nav-only rules */
@media (max-width: 800px) {
    .nav-sidebar[b-9peu40lniu] {
        position: fixed;
        width: 100%;
        height: var(--nav-mobile-height);
        left: 0;
        top: unset;
        bottom: 0;
        z-index: 100;
        border-right: none;
        border-top: 1px solid var(--nav-border-clr);
        padding: 0;
    }

    .nav-sidebar-header[b-9peu40lniu] {
        display: none;
    }

    .nav-sidebar-list[b-9peu40lniu] {
        display: grid;
        grid-auto-columns: var(--nav-mobile-item-size);
        grid-auto-flow: column;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: auto;
        scrollbar-color: var(--nav-active-clr) var(--nav-bg-clr);
    }

    .nav-sidebar-item[b-9peu40lniu] {
        height: 100%;
    }

    .nav-sidebar-link[b-9peu40lniu],
    .nav-dropdown-btn[b-9peu40lniu],
    [b-9peu40lniu] .nav-sidebar-link {
        width: var(--nav-mobile-item-size);
        height: var(--nav-mobile-item-size);
        border: 2px solid transparent;
        padding: 0;
        border-radius: 0;
        justify-content: center;
    }

        .nav-sidebar-link:hover[b-9peu40lniu],
        .nav-dropdown-btn:hover[b-9peu40lniu],
        [b-9peu40lniu] .nav-sidebar-link:hover {
            background-color: var(--nav-hover-bg);
            border: 2px solid var(--nav-hover-border-clr);
        }

        .nav-sidebar-link span[b-9peu40lniu],
        .nav-dropdown-btn span[b-9peu40lniu],
        .nav-dropdown-btn svg:last-child[b-9peu40lniu],
        [b-9peu40lniu] .nav-sidebar-link span {
            display: none;
        }

    .nav-sub-menu.show[b-9peu40lniu] {
        position: fixed;
        bottom: var(--nav-mobile-height);
        left: 0;
        box-sizing: border-box;
        height: var(--nav-mobile-height);
        width: 100%;
        max-height: none;
        background-color: var(--nav-hover-bg);
        display: flex;
        justify-content: center;
    }

        .nav-sub-menu.show li[b-9peu40lniu] {
            display: inline-flex;
        }

        .nav-sub-menu.show .nav-sidebar-link[b-9peu40lniu],
        .nav-sub-menu.show[b-9peu40lniu]  .nav-sidebar-link {
            box-sizing: border-box;
            padding: 1em;
            width: auto;
            justify-content: center;
        }
}
/* /UIInfrastructure/Layouts/LandingLayout.razor.rz.scp.css */
/* Landing layout: the marketing page's own scroll container.

   NOTE: no ::deep — `.landing-shell` is authored directly in LandingLayout.razor, so it IS the
   scoped element. ::deep would target descendants only and these rules would never apply. (Same
   note as LoginLayout.razor.css, and for the same reason.)

   IT MUST SCROLL ITSELF. app.css sets `html, body { height: 100%; overflow: hidden }`, so the
   document does not scroll — every layout in this app supplies its own scrolling region, and one
   that forgets simply cannot reach past the fold. This shell was originally a plain block with
   min-height, which meant the landing page rendered in full and showed only its first screen.

   position:fixed + inset:0 rather than height:100%, copying LoginLayout: the shell sits inside
   TelerikRootComponent's wrapper, and a percentage height depends on every ancestor having one.
   Fixed positioning sizes against the viewport regardless of what is between.

   Do NOT add width:100vw — 100vw includes the vertical scrollbar gutter, which overflows and forces
   a horizontal scrollbar. inset:0 already accounts for it. */
.landing-shell[b-uzzipx6nlv] {
    position: fixed;
    inset: 0;
    overflow-y: auto;

    /* The page's decorative layers (floating paper stack, radial glows) extend past the content box
       by design. Contained here so they cannot produce a horizontal scrollbar, which on a sticky
       header shows up as the whole bar sliding sideways. */
    overflow-x: hidden;

    background: #0b1220;
}
/* /UIInfrastructure/Layouts/LoginLayout.razor.rz.scp.css */
/* Login layout: full-viewport branded backdrop.
   Pins to the viewport so it covers the entire screen regardless of the
   surrounding Telerik host chrome, and centers the login card.

   NOTE: no ::deep here — `.login-shell` is authored directly in
   LoginLayout.razor, so it IS the scoped element. ::deep would target
   descendants only and the rules would never apply. */
.login-shell[b-8maao4vflo] {
    /* position:fixed + inset:0 already sizes this to the viewport and correctly
       accounts for scrollbar width. Do NOT add width:100vw — 100vw includes the
       vertical scrollbar gutter, which overflows and forces a horizontal scrollbar. */
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: auto;
    background:
        radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.22), transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0b1220 100%);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    z-index: 0;
    box-sizing: border-box;
}

.login-shell[b-8maao4vflo]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure the login card sits above the decorative grid overlay. Uses ::deep
   because @Body-rendered children (the Login page) live in a different
   component scope. */
[b-8maao4vflo] > * {
    position: relative;
    z-index: 1;
}
/* /UIInfrastructure/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-slp200wipu],
.components-reconnect-repeated-attempt-visible[b-slp200wipu],
.components-reconnect-failed-visible[b-slp200wipu],
.components-pause-visible[b-slp200wipu],
.components-resume-failed-visible[b-slp200wipu],
.components-rejoining-animation[b-slp200wipu] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-slp200wipu],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-slp200wipu],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-slp200wipu],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-slp200wipu],
#components-reconnect-modal.components-reconnect-retrying[b-slp200wipu],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-slp200wipu],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-slp200wipu],
#components-reconnect-modal.components-reconnect-failed[b-slp200wipu],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-slp200wipu] {
    display: block;
}


#components-reconnect-modal[b-slp200wipu] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-slp200wipu 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-slp200wipu 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-slp200wipu 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-slp200wipu]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-slp200wipu 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-slp200wipu {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-slp200wipu {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-slp200wipu {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-slp200wipu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-slp200wipu] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-slp200wipu] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-slp200wipu] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-slp200wipu] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-slp200wipu] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-slp200wipu] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-slp200wipu 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-slp200wipu] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-slp200wipu {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}