@import 'TwoForge.Crm.Web.Client.05y1413t6c.bundle.scp.css';

/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login[b-40b5680yk6] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: var(--surface-page);
}

.login__panel[b-40b5680yk6] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.login__brand[b-40b5680yk6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-size: var(--text-head);
    letter-spacing: -0.01em;
}

.login__brand:hover[b-40b5680yk6] {
    text-decoration: none;
}

/* The chip itself is .brand-mark in app.css. The sign-in screen gives it the most surround of
   the three lockups, so it takes the largest size. */
.login__brand-mark[b-40b5680yk6] {
    --brand-mark-size: 28px;
}

.login__brand-text[b-40b5680yk6] {
    font-weight: var(--weight-normal);
    color: var(--text-muted);
}

.login__brand-text strong[b-40b5680yk6] {
    font-weight: var(--weight-medium);
    color: var(--text);
}

.login__card[b-40b5680yk6] {
    width: 100%;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.login__legal[b-40b5680yk6] {
    margin: 0;
    font-size: var(--text-meta);
    color: var(--text-subtle);
}

@media (max-width: 420px) {
    .login[b-40b5680yk6] {
        padding: var(--space-4) var(--space-3);
    }

    .login__card[b-40b5680yk6] {
        padding: var(--space-5) var(--space-4);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell frame. Scoped to MainLayout; NavMenu styles its own contents.

   The whole thing is CSS-only: no JavaScript, no circuit, no WebAssembly download is needed for the
   sidebar to open or the user menu to drop down. That is what lets the statically rendered account
   pages live inside the same shell as the interactive ones. */

.shell[b-8y2bghhej0] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas:
        "topbar  topbar"
        "sidebar main";
    background: var(--surface-page);
}

/* The toggle itself is never seen; the label in the top bar is its handle. */
.shell__nav-toggle[b-8y2bghhej0] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.shell__skip[b-8y2bghhej0] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: 0 0 var(--radius-sm) 0;
}

.shell__skip:focus[b-8y2bghhej0] {
    left: 0;
}

/* ------------------------------------------------------------------ top bar */

.shell__topbar[b-8y2bghhej0] {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding-inline: var(--space-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.shell__hamburger[b-8y2bghhej0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}

.shell__hamburger:hover[b-8y2bghhej0] {
    background: var(--surface-active);
    color: var(--text);
}

.shell__wordmark[b-8y2bghhej0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    color: var(--text);
    font-size: var(--text-title);
    letter-spacing: -0.01em;
}

.shell__wordmark:hover[b-8y2bghhej0] {
    text-decoration: none;
}

/* The chip itself is .brand-mark in app.css - one definition, which is what the comment that
   used to sit here only claimed. The top bar is the tightest of the three, so it takes the
   smallest size. */
.shell__wordmark-mark[b-8y2bghhej0] {
    --brand-mark-size: 24px;
}

.shell__wordmark-text[b-8y2bghhej0] {
    font-weight: var(--weight-normal);
    color: var(--text-muted);
}

.shell__wordmark-text strong[b-8y2bghhej0] {
    font-weight: var(--weight-medium);
    color: var(--text);
}

/* ------------------------------------------------------------------ search */

.shell__search[b-8y2bghhej0] {
    position: relative;
    flex: 0 1 420px;
    margin-inline-start: var(--space-4);
}

.shell__search-icon[b-8y2bghhej0] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}

.shell__search-input[b-8y2bghhej0] {
    width: 100%;
    height: 30px;
    padding: 0 var(--space-3) 0 var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-size: var(--text-body);
}

.shell__search-input[b-8y2bghhej0]::placeholder {
    color: var(--text-subtle);
}

.shell__search-input:focus[b-8y2bghhej0] {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ------------------------------------------------------------------ user menu */

.shell__user[b-8y2bghhej0] {
    position: relative;
    flex: none;
}

.shell__user-trigger[b-8y2bghhej0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-body);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.shell__user-trigger[b-8y2bghhej0]::-webkit-details-marker {
    display: none;
}

.shell__user-trigger:hover[b-8y2bghhej0] {
    background: var(--surface-active);
}

.shell__user-name[b-8y2bghhej0] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell__user-menu[b-8y2bghhej0] {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 50;
    min-width: 236px;
    padding: var(--space-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
}

.shell__user-card[b-8y2bghhej0] {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-1);
}

.shell__user-card-name[b-8y2bghhej0] {
    font-weight: var(--weight-medium);
}

.shell__user-card-mail[b-8y2bghhej0] {
    font-size: var(--text-meta);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell__user-form[b-8y2bghhej0] {
    margin: 0;
}

.shell__user-item[b-8y2bghhej0] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-body);
    text-align: left;
    cursor: pointer;
}

.shell__user-item:hover[b-8y2bghhej0] {
    background: var(--surface-active);
    text-decoration: none;
}

.shell__user-item--button[b-8y2bghhej0] {
    color: var(--danger-text);
}

/* ------------------------------------------------------------------ sidebar */

.shell__sidebar[b-8y2bghhej0] {
    grid-area: sidebar;
    position: sticky;
    top: var(--topbar-height);
    align-self: start;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-nav);
    border-right: 1px solid var(--border-nav);
    scrollbar-width: thin;
}

.shell__scrim[b-8y2bghhej0] {
    display: none;
}

/* ------------------------------------------------------------------ main */

.shell__main[b-8y2bghhej0] {
    grid-area: main;
    min-width: 0;
    padding-bottom: var(--space-9);
}

/* ------------------------------------------------------------------ collapsed, wide screens */

/* On a wide screen the toggle collapses the sidebar away to give the data the full width. */
.shell__nav-toggle:checked ~ .shell[b-8y2bghhej0] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "topbar"
        "main";
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar[b-8y2bghhej0] {
    display: none;
}

/* ------------------------------------------------------------------ narrow screens */

/* Below 900px the sidebar stops being a column and becomes an overlay that starts closed. */
@media (max-width: 899.98px) {
    .shell[b-8y2bghhej0] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }

    .shell .shell__sidebar[b-8y2bghhej0] {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        bottom: 0;
        z-index: 45;
        width: min(var(--nav-width), 84vw);
        height: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-3);
    }

    .shell__nav-toggle:checked ~ .shell .shell__sidebar[b-8y2bghhej0] {
        display: block;
        transform: translateX(0);
    }

    .shell__nav-toggle:checked ~ .shell .shell__scrim[b-8y2bghhej0] {
        display: block;
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        z-index: 44;
        background: rgba(17, 22, 29, 0.45);
    }

    .shell__search[b-8y2bghhej0] {
        flex: 1 1 auto;
        margin-inline-start: var(--space-2);
    }

    .shell__user-name[b-8y2bghhej0] {
        display: none;
    }
}

/* Phones: the wordmark text goes, the search box stays - it is the primary way in on a phone. */
@media (max-width: 599.98px) {
    :root[b-8y2bghhej0] {
        --gutter: 1rem;
    }

    .shell__wordmark-text[b-8y2bghhej0] {
        display: none;
    }

    .shell__topbar[b-8y2bghhej0] {
        gap: var(--space-2);
        padding-inline: var(--space-2);
    }

    .shell__user-menu[b-8y2bghhej0] {
        min-width: 220px;
    }
}

/* ------------------------------------------------------------------ wordmark, desktop

   The sidebar now carries the workspace block - the mark, the company and the product - so a
   second lockup in the top bar is the same information twice, three centimetres apart. It stays
   below 900px, where the sidebar is a closed overlay and the top bar is the only chrome on screen.

   Appended after the responsive blocks above on purpose: it has to win over whatever they set. */
@media (min-width: 900px) {
    .shell__wordmark[b-8y2bghhej0] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The sidebar's own contents. The sidebar frame - its width, its position, whether it is a column
   or an overlay - belongs to MainLayout.razor.css.

   THE RAIL IS RECESSED AND THE ACTIVE ITEM LIFTS.
   A navy rail under a light page is a 2015 admin template, and the blue-grey text it forces on
   itself reads poorly at 13px. But a WHITE rail beside a paper page is flatter still: the
   navigation ends up brighter than the data, which is backwards. So the rail sits one tone below
   the page, and the selected item is plain white with a hairline. On a recessed surface white
   reads as raised, which buys a genuinely premium active state without spending a single colour,
   gradient or shadow on it.

   NOTHING HERE IS COLOURED. Colour in this product marks a pipeline stage, an ageing threshold or
   a status. A navigation item is none of those.

   WHY ::deep ON EVERY .nav__link RULE
   NavLink is a COMPONENT, and Blazor's CSS isolation only stamps its scope attribute onto plain
   elements written in this file. The <a> that NavLink renders never receives it, so a bare
   `.nav__link { ... }` rule compiles to `.nav__link[b-xxxxx]` and matches nothing - which is
   exactly why this sidebar had no visible active state at all until it was found. The child
   <span class="nav__icon"> IS stamped, because child content is compiled in the parent's context,
   so the icon rules kept working and masked the problem. */

.nav[b-dxlkbx1w9w] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 10px var(--space-4);
    color: var(--text-nav);
    font-size: var(--text-body);
}

/* ---------------------------------------------------------------------- workspace */

.nav__workspace[b-dxlkbx1w9w] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 -10px var(--space-3);
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-nav);
    color: var(--text-nav-strong);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.nav__workspace:hover[b-dxlkbx1w9w] {
    background: var(--surface-nav-hover);
    text-decoration: none;
}

/* The chip itself is .brand-mark in app.css. This one used to carry a raw 6px radius and paint
   itself from --surface-inverse rather than the brand pair, which is why it was a different
   colour from the other two in dark mode. */
.nav__workspace-mark[b-dxlkbx1w9w] {
    --brand-mark-size: 26px;
}

.nav__workspace-text[b-dxlkbx1w9w] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nav__workspace-name[b-dxlkbx1w9w] {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The one place uppercase micro-type appears above the fold, and it is doing real work: it says
   which product this workspace is without competing with the company name above it. */
.nav__workspace-meta[b-dxlkbx1w9w] {
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    line-height: 1;
}

/* ---------------------------------------------------------------------- items */

.nav__list[b-dxlkbx1w9w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav[b-dxlkbx1w9w]  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-nav);
    text-decoration: none;
    font-size: var(--text-body);
    line-height: 1;
    letter-spacing: -0.006em;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.nav[b-dxlkbx1w9w]  .nav__link:hover {
    background: var(--surface-nav-hover);
    color: var(--text-nav-strong);
    text-decoration: none;
}

/* NavLink adds .active for the matching route.

   White on a recessed rail, plus a hairline and a weight step. No pill, no bar, no accent: the
   item simply comes forward. One selected row in a list of thirteen only needs to be told once. */
.nav[b-dxlkbx1w9w]  .nav__link.active {
    background: var(--surface-nav-active);
    border-color: var(--border-nav);
    color: var(--text-nav-strong);
    font-weight: var(--weight-medium);
}

.nav[b-dxlkbx1w9w]  .nav__link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* 16px against 13px text. The earlier 18 made the rail read as an icon tray; 16 sits level with
   the cap height and lets the words lead, which is what a navigation item is for. */
.nav__icon[b-dxlkbx1w9w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--text-subtle);
    transition: color var(--transition-fast);
}

.nav[b-dxlkbx1w9w]  .nav__link:hover .nav__icon,
.nav[b-dxlkbx1w9w]  .nav__link.active .nav__icon {
    color: var(--text-nav-strong);
}

.nav__text[b-dxlkbx1w9w] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- group */

/* No divider rule. The space above the label is the separation; a line as well is one signal too
   many in a rail this short. */
.nav__group-label[b-dxlkbx1w9w] {
    margin: var(--space-5) 10px var(--space-2);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-subtle);
}

/* ---------------------------------------------------------------------- footer */

.nav__footer[b-dxlkbx1w9w] {
    margin-top: auto;
    padding: var(--space-4) 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* --text-meta, not --text-micro. The rest of the 10px in this file were uppercase labels and
       a chip, which is the micro role; these two lines are a company line and a version string -
       footnotes, which is what --text-meta names. It separates from the 13px nav items on colour
       and position, not on being a pixel smaller than a label. */
    font-size: var(--text-meta);
    line-height: 1.5;
    color: var(--text-subtle);
}

/* The version string. There is no monospace family any more - Geist is the only one, and the
   figures in it line up because tabular-nums is on globally at body. Same treatment as .mono in
   app.css: the family, no tracking of its own. */
.nav__footer-line--dim[b-dxlkbx1w9w] {
    font-family: var(--font-sans);
    letter-spacing: normal;
    color: var(--text-subtle);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gtm6sqvl24],
.components-reconnect-repeated-attempt-visible[b-gtm6sqvl24],
.components-reconnect-failed-visible[b-gtm6sqvl24],
.components-pause-visible[b-gtm6sqvl24],
.components-resume-failed-visible[b-gtm6sqvl24],
.components-rejoining-animation[b-gtm6sqvl24] {
    display: none;
}

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


/* This started as the stock Blazor reconnect dialog and still had its stock colours: a hard
   `white` panel, a #6b9ed2 button and a #0087ff ring, none of which know about dark mode. The
   panel was the real defect - `white` with the inherited var(--text) on top is near-white text on
   white the moment the app is in dark mode, which is the one screen you cannot afford to lose,
   because it is what shows when the circuit has already dropped. Semantic tokens only now. */
#components-reconnect-modal[b-gtm6sqvl24] {
    background-color: var(--surface-raised);
    color: var(--text);
    width: 20rem;
    margin: 20vh auto;
    padding: var(--space-7);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gtm6sqvl24 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-gtm6sqvl24]::backdrop {
    background-color: rgba(17, 22, 29, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-gtm6sqvl24 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-gtm6sqvl24] {
    border: 0;
    background-color: var(--accent);
    color: var(--text-on-accent);
    font: inherit;
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-6);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-gtm6sqvl24] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-gtm6sqvl24] {
        background-color: var(--accent-active);
    }

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

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

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

@keyframes components-rejoining-animation-b-gtm6sqvl24 {
    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;
    }
}