@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* بخش ۱۰۶ — سرگروه از برچسب به دکمه تبدیل شد
   ------------------------------------------------------------------------------------------------
   This was a `<div>` that labelled the rows under it; it is now the `<summary>` that opens them.
   Same class name on purpose — it is the same thing on the screen — but everything a label does
   not need and a control does had to be added: a pointer, a hover, a focus ring, and a mark saying
   which way it will go.

   Bigger than it was (11px → 12px) and no longer letter-spaced. Eleven-pixel tracked-out grey text
   is how you write a caption nobody is meant to click, which is exactly what it used to be and
   exactly what it must not look like now. It stays grey and stays smaller than a menu row, because
   the rows are still the thing being chosen. */
.nav-group[b-gustrslesq] {
    font-size: 12px;
    color: var(--tx2);
    padding: 9px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Both of these remove the browser's own triangle. `list-style` is the modern spelling and
       `::-webkit-details-marker` is the one Safari still needs; the chevron below replaces it,
       because the native marker sits at the inline start and points in a direction no stylesheet
       in an RTL page gets to choose. */
    list-style: none;
    user-select: none;
}

.nav-group[b-gustrslesq]::-webkit-details-marker { display: none; }

.nav-group:hover[b-gustrslesq] { background: var(--bg2); }

/* The chevron, drawn with two borders rather than a glyph or an SVG: a character like ⌄ is a font
   away from being a different shape, and this is the one mark on the screen whose rotation carries
   the meaning. `margin-inline-start: auto` puts it at the far edge, so on this RTL page it sits on
   the left of the label and the eye finds all eleven of them in one column. */
.nav-group[b-gustrslesq]::after {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    margin-inline-start: auto;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    /* A 6×6 box with only its inline-start and block-end borders is an «L» whose corner is the
       point of the chevron, and the rotation aims that corner. Worth checking against the matrix
       rather than against intuition, because mine was wrong the first time: `rotate(45deg)` maps
       the corner to (−4.24, 0) — pointing **left**, the shut state — and `rotate(-45deg)` maps it
       to (0, +4.24), pointing **down** at the rows it has revealed. Left-then-down is the RTL
       mirror of the ▶/▼ every disclosure uses. */
    transform: rotate(45deg);
    transition: transform .14s ease;
    opacity: .75;
}

.nav-sec[open] > .nav-group[b-gustrslesq]::after { transform: rotate(-45deg); }

/* The rows inside a section are **not** styled here, and that is not an oversight. Scoped CSS
   stamps its `[b-…]` attribute on the elements this component renders, and `.nav-item` is rendered
   by `NavLink` — a child component, which never gets the stamp. That is why every `.nav-item` rule
   in this application lives in `app.css`, and the two that indent a section's rows live there with
   them. Written down because the selector compiles, loads, and silently matches nothing.

   Same reason the mobile band's `.nav-sec` rules are over there: they sit inside the one
   `@@media` block that turns the rail into a row, and splitting that block across two files to
   keep three selectors here would hide half of a layout from whoever reads the other half. */
.nav-sec[open][b-gustrslesq] { padding-block-end: 6px; }

.nav-user[b-gustrslesq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 12px 10px 2px;
    font-size: 12.5px;
    color: var(--tx2);
}

.nav-user span[b-gustrslesq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-link[b-gustrslesq] {
    background: none;
    border: 0;
    color: var(--pr);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover[b-gustrslesq] { color: var(--pr-dark); text-decoration: underline; }

/* `--ground` since بخش ۸۸: this is the field the signed-out card sits on, and the card is white.
   `--bg2` is now the colour of the page body itself, so leaving it here would put the login card
   at the same depth as everything else — on the one screen in the system that is a single card on
   an otherwise empty field, and so the one screen where it has to read as an object. */
.centered[b-gustrslesq] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--ground);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-f413my0g2u],
.components-reconnect-repeated-attempt-visible[b-f413my0g2u],
.components-reconnect-failed-visible[b-f413my0g2u],
.components-pause-visible[b-f413my0g2u],
.components-resume-failed-visible[b-f413my0g2u],
.components-rejoining-animation[b-f413my0g2u] {
    display: none;
}

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


#components-reconnect-modal[b-f413my0g2u] {
    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-f413my0g2u 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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