@import 'TwoForge.Crm.Web.Client.fc6hpjd53q.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);
}

/* THE LOCKUP IS A COMPONENT NOW - Components/Layout/BrandLockup.razor - because an uploaded logo
   has to appear here, in the command bar and in the settings preview, and three hand-copied lockups
   is the exact defect docs/BRAND.md was written about.

   THE SIZE IS SET ON THIS ELEMENT AND NOT ON THE LOCKUP ITSELF, and that is a fact about Blazor
   rather than a preference. CSS isolation stamps the scope attribute onto plain elements written in
   THIS file; the span BrandLockup renders is written in ITS file and carries ITS scope, so a rule
   here naming a class passed to it as a parameter would compile to a selector that matches nothing.
   A custom property inherits, so setting it on the anchor around the lockup reaches the chip inside
   it. There are two lockups in the product now, and this is the larger: the sign-in screen gives the
   mark far more surround than the command bar does, and a mark that does not grow with its surround
   looks shrunken in the roomier one. */
.login__brand[b-40b5680yk6] {
    /* 18px, which is what this wordmark has always been. It is set on the lockup's own text rather
       than inherited through font-size on this anchor, because the text now lives inside
       BrandLockup and app.css §24 gives it --text-title (15px) for the command bar, where 18 would
       shout. The sign-in screen has the room. */
    --brand-lockup-text-size: var(--text-head);

    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;
}

.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 FRAME IS CSS. No JavaScript, no circuit and no WebAssembly download is needed for the
   rail to collapse, the drawer to open or a menu to drop down. That is what lets the statically
   rendered account pages live inside the same shell as the interactive ones.

   THE MENUS BORROW THEIR SURFACE FROM app.css §23.3. .menu__panel, .menu__item and .menu__separator
   are the product's anchored-popover vocabulary and every floating list in the application is
   already drawn in it; what this file adds is the <details>/<summary> plumbing those classes were
   not written for, because the list screens open their menus from a click handler and the shell
   cannot. One vocabulary, two triggers. */

.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);
}

/* Neither toggle is ever seen; the labels in the command bar are their handles. */
.shell__nav-toggle[b-8y2bghhej0],
.shell__drawer-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;
}

/* ------------------------------------------------------------------ the command bar */

/* THREE PARTS: A LEFT FLANK, A FIELD, A RIGHT FLANK.

   THE FLANKS TAKE THEIR CONTENT'S WIDTH AND THE FIELD CENTRES ITSELF IN WHAT IS LEFT, with auto
   margins. It is a few dozen pixels off the bar's true centre - the right flank carries four
   controls and a name, the left carries a toggle and a logo - and that is the version that works.

   EQUAL FLANKS WERE TRIED FIRST AND ARE WHAT YOU WANT, until you measure them. `flex: 1 1 0` on
   both does put the field on the viewport's exact centre, but it also hands each flank half the
   leftover whether its contents fit or not: at 900px each gets 80px to hold a 360px cluster, and
   because the right flank is justify-content: flex-end its contents overflow LEFTWARDS, straight
   over the field. Measured, when a create button still led this flank: it started 238px inside the
   field's right edge, and nothing reported an error because the page itself never got wider. Equal
   flanks need about 1460px before they stop doing that, which is wider than the laptops this
   product runs on - and the flank has only got shorter since, which does not make the rule safe,
   it just moves the width at which it bites.

   So the field is centred in the leftover rather than on the bar, and it can never collide, because
   every part is in flow and sized by its contents. See .shell__search.

   The bar is also a POSITIONED element, which anything absolutely positioned inside it inherits as
   its containing block. .shell__search keeps position: relative at every width for that reason -
   read the comment there before making it static. */
.shell__topbar[b-8y2bghhej0] {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--topbar-height);
    padding-inline: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.shell__brand[b-8y2bghhej0] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    min-width: 0;
}

.shell__actions[b-8y2bghhej0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 0;
}

/* The two rules that group the right flank. 20px against a 36px control: short enough to read as
   punctuation rather than as a border, which is what a full-height rule would look like.

   --border-strong, not --border. At --border a hairline on --surface is #e4e4e1 on white, which is
   a rule you can only find if you already know it is there - and a separator nobody sees is an
   element that does no work. One step up the ramp is still quiet enough to disappear the moment you
   stop looking for it. */
.shell__divider[b-8y2bghhej0] {
    width: 1px;
    height: 20px;
    flex: none;
    margin-inline: var(--space-1);
    background: var(--border-strong);
}

/* THE LOCKUP KEEPS ITS OWN LEFT EDGE AND IS NEVER TIED TO THE RAIL'S WIDTH.
   A brand block sized to the sidebar has to shrink with it, which takes the customer's logo off the
   screen at exactly the moment they asked for more room - the one moment a product should not stop
   identifying itself. Nothing is aligned to the rail, so nothing breaks when the rail collapses. */
.shell__lockup[b-8y2bghhej0] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

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

/* The two hamburgers swap at the breakpoint where the sidebar changes meaning. See the comment on
   the pair of checkboxes in MainLayout.razor. */
.shell__drawer-button[b-8y2bghhej0] {
    display: none;
}

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

/* THE FIELD IS THE MIDDLE PART, in flow, centred by its own auto margins.

   Two other ways were tried and both were wrong. Absolutely positioned and centred on the viewport,
   it is invisible to the flex line it sits in, so the right-hand cluster lays out as though it were
   not there: measured on the real sheet at 1024px, the leading control of the right flank - a
   create button, in the arrangement that had one - began at x=674 while the field ran to x=707, and
   every window under about 1130px drew the two on the same pixels. Then, in
   flow with these same auto margins, it did not centre at all - because a .spacer sat after it at
   flex: 1 1 auto and swallowed the free space before the margins could see any, leaving the field
   flush against the lockup with a hand's width of nothing to its right. The spacer is gone; the
   margins work.

   In flow, with both flanks sized by their contents and auto margins on this, there is nothing left
   to get wrong: the field takes the room it asks for or less, centres itself in whatever the flanks
   did not need, and cannot collide with either of them because all three are in the same line.
   min-width stops it being squeezed below its own padding, which is what once turned it into a
   103px pill of nothing on a phone. */
.shell__search[b-8y2bghhej0] {
    position: relative;
    flex: 0 1 680px;
    min-width: 8rem;
    margin-inline: auto;
}

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

/* 36px, like every other control on the bar - see the height rule under "the menus". The field does
   not lead on height, it leads on WIDTH: 680px against a 36px icon button. A command bar whose
   controls are three different heights reads as assembled; one where they share a height and differ
   in width reads as laid out. */
.shell__search-input[b-8y2bghhej0] {
    width: 100%;
    height: 36px;
    padding: 0 66px 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);
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

/* Hover is a whole tone of its own here, unlike everywhere else in the product, because a recessed
   pill on a white bar has no affordance until the pointer is over it. */
.shell__search-input:hover[b-8y2bghhej0] {
    border-color: var(--border-strong);
}

.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);
}

.shell__search-hint[b-8y2bghhej0] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

/* Once the field has focus the shortcut has done its job and the hint is just something else in a
   field somebody is typing into. */
.shell__search-input:focus ~ .shell__search-hint[b-8y2bghhej0] {
    opacity: 0;
}

/* ------------------------------------------------------------------ the menus */

/* app.css §23.3 gives .menu position: relative and display: inline-flex, which is what a <details>
   needs too: the summary lays out in the bar and the panel is taken out of flow beneath it. The
   marker has to go on both spellings - Safari still uses the -webkit- pseudo-element. */
.shell__topbar .menu > summary[b-8y2bghhej0] {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.shell__topbar .menu > summary[b-8y2bghhej0]::-webkit-details-marker {
    display: none;
}

/* A <summary> is not a button, so .btn's own :focus-visible never applies to it. */
.shell__topbar .menu > summary:focus-visible[b-8y2bghhej0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ONE HEIGHT FOR EVERY CONTROL ON THE BAR, AND THE BAR IS THE ONLY PLACE THIS IS TRUE.
   .btn is 32px everywhere else in the product, which is right for a toolbar sitting above a dense
   table. The command bar is not dense: it holds seven controls across a 56px band, and at 32 they
   float in it with ten pixels of nothing above and below each. 36 gives the same ten pixels to the
   BAND instead of to each control, which is what makes a row of unlike things - a black button, two
   glyphs, a name, a field - read as one rank. It is also a better pointer target, and the only
   reason not to do it product-wide is that nothing else has this much room. */
.shell__topbar .btn[b-8y2bghhej0] {
    min-height: 36px;
}

.shell__topbar .btn--icon[b-8y2bghhej0] {
    width: 36px;
}

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

/* A PILL, NOT A ROW OF THREE THINGS. The avatar, the name and the chevron are one control and the
   rounded container is what says so; at --radius-sm they read as a monogram that happens to have
   text after it. The transparent border reserves the pixel the hover border occupies, so nothing
   moves when the pointer arrives. */
.shell__user-trigger[b-8y2bghhej0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3) 0 var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text);
    font-size: var(--text-body);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

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

.shell__user-trigger .avatar[b-8y2bghhej0] {
    width: 28px;
    height: 28px;
}

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

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

.shell__user-card[b-8y2bghhej0] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border);
}

/* The one place the monogram is a portrait rather than a marker, so it takes the room for one. */
.shell__user-card .avatar[b-8y2bghhej0] {
    width: 36px;
    height: 36px;
    font-size: var(--text-meta);
}

.shell__user-card-text[b-8y2bghhej0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.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-signout[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);
}

/* ------------------------------------------------------------------ the rail, wide screens */

/* THE COLLAPSED SIDEBAR IS A RAIL, NOT AN ABSENCE. The previous shell set display: none on it, so
   asking for more width cost the user their map of the product and there was nothing left to click
   back. Sixty pixels keeps every module on screen and one click away, which is what every
   application this one is measured against does with the same toggle.

   The rules that collapse the rail's CONTENTS live in NavMenu.razor.css, because Blazor stamps a
   scope attribute onto the rightmost element of a selector and those elements belong to NavMenu. */
.shell__nav-toggle:checked ~ .shell[b-8y2bghhej0] {
    grid-template-columns: var(--nav-rail-width) minmax(0, 1fr);
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar[b-8y2bghhej0] {
    width: var(--nav-rail-width);
    transition: width var(--transition-base);
}

/* THE LABELS COME BACK BY EXPANDING THE RAIL, AND A TOOLTIP WOULD NOT HAVE WORKED AT ALL.

   The first attempt was an ::after on the nav link at left: calc(100% + 10px). It never rendered a
   pixel: .shell__sidebar scrolls, overflow-y: auto forces overflow-x from visible to auto, and the
   rail is therefore a scroll container on BOTH axes that clips every absolutely positioned
   descendant at its own edge. Measured, the tip began at x=61.3 against a clip box ending at x=60.
   No version of that rule works - clip and hidden both clip, and a fixed-position pseudo-element has
   no way to learn the link's vertical offset without script.

   Expanding is the better interaction anyway, and it is what Teams and VS Code do with the same
   rail. A grid item given an explicit width wider than its track simply overflows it, so the
   sidebar draws OVER the page instead of reflowing it, and the z-index puts it on top. :focus-within
   is the half that matters most: a keyboard user tabbing into the rail gets the same labels a
   pointer user gets, which a hover tooltip never gave them.

   The rules that bring the rail's CONTENTS back - the text, the headings, the workspace block - are
   in NavMenu.razor.css, because those elements are NavMenu's. */
.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover[b-8y2bghhej0],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within[b-8y2bghhej0] {
    width: var(--nav-width);
    z-index: 46;
    box-shadow: var(--shadow-3);
}

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

/* Below 900px the sidebar stops being a column and becomes an overlay that starts closed, driven by
   the OTHER checkbox. The rail preference is irrelevant down here and is explicitly overridden, so
   somebody who collapsed the rail on a desktop does not arrive on a phone with a 60px stub. */
@media (max-width: 899.98px) {
    /* THE BAR CLOSES UP BEFORE ANYTHING LEAVES IT. 16px between the three parts is generosity a
       desk can afford and a laptop cannot; halving it returns 16px to the field before a single
       control has to be hidden, which is always the cheaper move. */
    .shell__topbar[b-8y2bghhej0] {
        gap: var(--space-2);
    }

    .shell[b-8y2bghhej0],
    .shell__nav-toggle:checked ~ .shell[b-8y2bghhej0] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }

    /* The rail preference does not reach the drawer: down here the sidebar is an overlay at its own
       width, and a 60px stub of unlabelled icons sliding out is not a menu. The hover expansion goes
       with it, or the drawer would jump wider the moment a finger touched it. */
    .shell__nav-toggle:checked ~ .shell .shell__sidebar[b-8y2bghhej0],
    .shell__nav-toggle:checked ~ .shell .shell__sidebar:hover[b-8y2bghhej0],
    .shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within[b-8y2bghhej0] {
        width: min(var(--nav-width), 84vw);
        z-index: 45;
        box-shadow: var(--shadow-3);
    }

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

    .shell__drawer-button[b-8y2bghhej0] {
        display: inline-flex;
    }

    .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__drawer-toggle:checked ~ .shell .shell__sidebar[b-8y2bghhej0] {
        transform: translateX(0);
    }

    .shell__drawer-toggle:checked ~ .shell .shell__scrim[b-8y2bghhej0] {
        display: block;
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        z-index: 44;
        /* The only raw colour in this sheet, and it has to be: a scrim is a wash over the page in
           both themes rather than a surface, and the token set has no colour that means "ink at
           45%". It reads correctly on the dark page too, which is why it was never split. */
        background: rgba(17, 22, 29, 0.45);
    }

    /* The field stops asking for 560px it cannot have and takes what is left instead. position
       STAYS relative: the magnifier and the Ctrl K chip are absolutely positioned against it, and
       the moment it is static they re-parent to .shell__topbar - which is sticky, and therefore a
       containing block - and fly to opposite ends of the bar, the magnifier landing on the
       hamburger and the chip on the avatar. */
    .shell__search[b-8y2bghhej0] {
        flex: 1 1 auto;
        margin-inline: 0 auto;
    }

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

/* A phone: the search box stays, because it is the primary way into the data on a small screen, and
   everything that is a convenience on a desktop gives up its room to it. */
/* A TABLET, OR A HALF-WIDTH WINDOW ON A LAPTOP. Measured at 600px the bar wanted more room than it
   had, and it is the two quiet controls plus the environment chip that make the difference - 44px
   for the chip, 36px each for the theme and the settings link, and the two hairlines that separate
   them. They leave together because separating two controls that are no longer there is what a
   stray rule is. */
@media (max-width: 767.98px) {
    /* THE TWO CONTROLS NOBODY REACHES FOR ON A SMALL SCREEN. The theme still follows the operating
       system, which on a phone or a tablet is where somebody sets it anyway, and branding is a desk
       job: an administrator choosing a logo wants to see it at the size it will be drawn, which is
       the one thing a narrow screen cannot show. Both stay one tap away in landscape. */
    .shell__theme[b-8y2bghhej0],
    .shell__settings[b-8y2bghhej0],
    .shell__divider[b-8y2bghhej0] {
        display: none;
    }

    /* AND THE ENVIRONMENT CHIP, the widest thing on the bar that nobody needs to read twice: down
       here the address bar is already showing the host, so which copy of the product this is has a
       second answer six millimetres away. */
    .env-chip[b-8y2bghhej0] {
        display: none;
    }
}

@media (max-width: 599.98px) {
    :root[b-8y2bghhej0] {
        --gutter: 1rem;
    }

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

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

    /* A PHONE BAR IS A BUDGET, AND THIS BLOCK SPENDS IT. Measured at 360px: the brand block is
       flex: none, the five controls are all flex: none, and the field carries a min-width, so
       nothing on the line could shrink and the bar simply ran off the screen. Three things give way,
       in the order of how little they are missed.

       FIRST THE LOCKUP, because it is the only thing here that is not a control: the fallback
       wordmark goes entirely and an uploaded logo is capped at 88px.

       THE CAP IS SET ON max-width AND NOT ON --brand-logo-max-width, and that is not a style
       choice. BrandLockup writes both of its size tokens as an INLINE style on the element it
       renders, so a custom property declared on an ancestor here loses to it every time - the
       inline declaration is on the same element the var() is read on. Setting the property this
       rule actually wants, at a specificity the component's own 0,1,0 rule cannot match, is the
       thing that works. ::deep because .brand-logo is rendered by BrandLockup and never carries
       this file's scope attribute. */
    .shell__lockup[b-8y2bghhej0]  .brand-logo {
        max-width: 72px;
    }

    /* AND THE BUILT-IN MARK WITH IT. It is a wordmark at 320:59, so 20px of height is 108px of
       width - the single widest thing in the brand block when no logo has been uploaded. 16px costs
       nothing legible at arm's length and returns 22px to the field.

       height, NOT --brand-logotype-height, for the reason spelled out above the rule before this
       one: BrandMark writes that token as an inline style on the element the var() is read on, and
       an ancestor cannot outrank an inline declaration. Setting the property itself can. */
    .shell__lockup[b-8y2bghhej0]  .brand-logotype {
        height: 16px;
    }

    .shell__lockup[b-8y2bghhej0]  .brand-lockup__text {
        display: none;
    }

    /* AND LAST THE FIELD'S FLOOR. 8rem is what stops it collapsing into its own padding at desk
       widths; down here 6rem is still a usable field and the 32px it returns is the difference
       between a bar that fits and one that does not. */
    .shell__search[b-8y2bghhej0] {
        min-width: 6rem;
    }

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

    /* AND ITS PADDING GOES WITH IT. The 62px of right padding exists to keep the field's text off
       the Ctrl K chip; left behind once the chip is hidden, it is 62px of reserved nothing inside a
       field that has almost no width to spare. */
    .shell__search-input[b-8y2bghhej0] {
        padding-right: var(--space-3);
    }

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

/* The drawer slides; somebody who has asked for less motion gets the same drawer without the slide.
   The transition is the only animation in the shell. */
@media (prefers-reduced-motion: reduce) {
    .shell .shell__sidebar[b-8y2bghhej0] {
        transition: 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.

   WHY THIS FILE REACHES FOR A CHECKBOX IT DOES NOT OWN
   The rail is collapsed by #shell-nav-toggle, which lives in MainLayout. Blazor stamps the scope
   attribute onto the RIGHTMOST element of a selector only, so `.shell__nav-toggle:checked ~ .shell
   .nav__text` compiles to `... .nav__text[b-xxxxx]` and works from here while the rules that
   collapse the FRAME stay in MainLayout's own sheet, where its elements are. Each sheet keeps the
   half it can actually select. */

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

/* ---------------------------------------------------------------------- groups */

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

/* 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);
}

/* The first heading has the rail's own top padding above it already. */
.nav__group:first-child .nav__group-label[b-dxlkbx1w9w] {
    margin-top: var(--space-1);
}

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

/* 34px, up from 32. The rail gained a group heading between every four or five items, which buys
   back more vertical room than the extra two pixels spend, and 34 is where a 16px glyph and 13px
   text stop feeling packed against the row above. */
.nav[b-dxlkbx1w9w]  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    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;
}

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

.nav__footer[b-dxlkbx1w9w] {
    margin-top: auto;
    padding-top: var(--space-4);
}

.nav__workspace[b-dxlkbx1w9w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 8px;
    border-top: 1px solid var(--border-nav);
    margin: 0 -2px;
}

.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;
    color: var(--text-nav-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --text-meta, not --text-micro. This is a footnote - a product name and a version string - and not
   an uppercase label, which is the role --text-micro names. It separates from the name above it on
   colour and size, not on being a label. */
.nav__workspace-meta[b-dxlkbx1w9w] {
    font-size: var(--text-meta);
    line-height: 1.3;
    color: var(--text-subtle);
}

/* ---------------------------------------------------------------------- the rail */

/* COLLAPSED, THE RAIL KEEPS THE ICONS AND DROPS EVERYTHING ELSE. Sixty pixels of frame, eight of
   padding, a 34px square item: the glyph lands on the same optical centre it occupies when the rail
   is open, so collapsing does not make the icons step sideways.

   THE SIDEBAR'S OWN WIDTH IS NOT SET HERE, and the reason is the scoping rule this file's header
   already explains, seen from the other side. Blazor stamps the scope attribute onto the RIGHTMOST
   element of a selector; .shell__sidebar belongs to MainLayout, so a rule written here with the
   sidebar as its subject compiles to `.shell__sidebar[b-navmenu]` and matches nothing at all. It
   was written here first and it silently did nothing: the rail collapsed, and hovering it did not
   widen it. Every rule whose SUBJECT is the sidebar - its rail width, and the hover/focus expansion
   - lives in MainLayout.razor.css. What stays here is everything whose subject is one of THIS
   component's elements, which may name the sidebar as an ancestor freely. */
.shell__nav-toggle:checked ~ .shell .nav[b-dxlkbx1w9w] {
    padding-inline: 8px;
}

.shell__nav-toggle:checked ~ .shell .nav[b-dxlkbx1w9w]  .nav__link {
    justify-content: center;
    gap: 0;
    padding: 0;
}

/* THE LABEL IS HIDDEN FROM THE EYE AND KEPT FOR THE ACCESSIBILITY TREE, and the difference between
   the two ways of doing that is the whole reason this rule is not display: none. The text inside
   .nav__text is the ONLY thing giving a NavLink its accessible name; display: none takes an element
   out of the tree entirely, which turns the rail into thirteen anonymous links for anybody using a
   screen reader. The clip pattern - the same one .sr-only uses in app.css - takes it out of the
   layout and leaves it in the tree. .nav__link is already position: relative, so the span leaves the
   flow and the 34px centred glyph box is unchanged. */
.shell__nav-toggle:checked ~ .shell .nav__text[b-dxlkbx1w9w] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The workspace name is not a label for anything; it is repeated in the command bar's own lockup
   and in the page title, so it can go out of the tree with the layout. */
.shell__nav-toggle:checked ~ .shell .nav__workspace-text[b-dxlkbx1w9w] {
    display: none;
}

/* The heading becomes the rule it was already implying. It keeps its text for a screen reader -
   text-indent moves the glyphs out of the box rather than removing them, which display: none would.
   A rail whose four groups are unlabelled to somebody using a screen reader is a worse rail. */
.shell__nav-toggle:checked ~ .shell .nav__group-label[b-dxlkbx1w9w] {
    height: 1px;
    margin: var(--space-4) 6px var(--space-3);
    padding: 0;
    overflow: hidden;
    text-indent: -999px;
    white-space: nowrap;
    background: var(--border-nav);
}

/* Nothing above the first group to separate it from. */
.shell__nav-toggle:checked ~ .shell .nav__group:first-child .nav__group-label[b-dxlkbx1w9w] {
    height: 0;
    margin-top: 0;
}

.shell__nav-toggle:checked ~ .shell .nav__workspace[b-dxlkbx1w9w] {
    justify-content: center;
    padding-inline: 0;
}

/* THE LABELS COME BACK BY EXPANDING THE RAIL, AND A TOOLTIP WOULD NOT HAVE WORKED AT ALL.

   The first attempt was an ::after on the link at left: calc(100% + 10px). It never rendered a
   pixel. .shell__sidebar scrolls, and overflow-y: auto forces overflow-x from visible to auto, so
   the rail is a scroll container on BOTH axes and clips every absolutely positioned descendant at
   its own edge. Measured: the tip began at x=61.3 against a clip box ending at x=60. There is no
   version of that rule which works - clip and hidden both clip, and a fixed-position pseudo-element
   has no way to learn the link's vertical offset without script.

   Expanding is the better interaction anyway, and it is what Teams and VS Code do with the same
   rail. The sidebar simply becomes wide again and draws OVER the page rather than reflowing it -
   a grid item with an explicit width larger than its track overflows, and the z-index puts it on
   top. :focus-within is the half that matters most: a keyboard user tabbing into the rail gets the
   same labels a pointer user gets, which a hover tooltip never gave them. */
.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav[b-dxlkbx1w9w] {
    padding-inline: 10px;
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav[b-dxlkbx1w9w]  .nav__link,
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav[b-dxlkbx1w9w]  .nav__link {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav__text[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav__text[b-dxlkbx1w9w] {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    clip-path: none;
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav__workspace-text[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav__workspace-text[b-dxlkbx1w9w] {
    display: flex;
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav__group-label[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav__group-label[b-dxlkbx1w9w] {
    height: auto;
    margin: var(--space-5) 10px var(--space-2);
    overflow: visible;
    text-indent: 0;
    background: none;
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav__group:first-child .nav__group-label[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav__group:first-child .nav__group-label[b-dxlkbx1w9w] {
    margin-top: var(--space-1);
}

.shell__nav-toggle:checked ~ .shell .shell__sidebar:hover .nav__workspace[b-dxlkbx1w9w],
.shell__nav-toggle:checked ~ .shell .shell__sidebar:focus-within .nav__workspace[b-dxlkbx1w9w] {
    justify-content: flex-start;
    padding-inline: 8px;
}

/* Below 900px the sidebar is an overlay at its full width, so the rail preference must not reach
   it - a drawer that slides out as a 60px stub of unlabelled icons is not a menu. */
@media (max-width: 899.98px) {
    .shell__nav-toggle:checked ~ .shell .nav[b-dxlkbx1w9w] {
        padding-inline: 10px;
    }

    .shell__nav-toggle:checked ~ .shell .nav[b-dxlkbx1w9w]  .nav__link {
        justify-content: flex-start;
        gap: 10px;
        padding: 0 10px;
    }

    .shell__nav-toggle:checked ~ .shell .nav__text[b-dxlkbx1w9w] {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip-path: none;
    }

    .shell__nav-toggle:checked ~ .shell .nav__workspace-text[b-dxlkbx1w9w] {
        display: flex;
    }

    .shell__nav-toggle:checked ~ .shell .nav__group-label[b-dxlkbx1w9w] {
        height: auto;
        margin: var(--space-5) 10px var(--space-2);
        overflow: visible;
        text-indent: 0;
        background: none;
    }

    /* height AS WELL AS the margin. The rail's :first-child rule sets height: 0, and it is more
       specific than the generic reset above, so resetting only margin-top left the drawer's first
       heading - "Pregled" - collapsed to nothing for anybody whose rail cookie happened to be set. */
    .shell__nav-toggle:checked ~ .shell .nav__group:first-child .nav__group-label[b-dxlkbx1w9w] {
        height: auto;
        overflow: visible;
        margin-top: var(--space-1);
    }

    .shell__nav-toggle:checked ~ .shell .nav__workspace[b-dxlkbx1w9w] {
        justify-content: flex-start;
        padding-inline: 8px;
    }

}
/* /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;
    }
}