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

/* /Components/Layout/GuildSelector.razor.rz.scp.css */
.guild-selector-toggle[b-tt5af750vt] {
    max-width: 14rem;
    border: 1px solid #d6d5d5;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.guild-selector-name[b-tt5af750vt] {
    font-size: 0.9rem;
}

.guild-selector-placeholder[b-tt5af750vt] {
    color: #8a8a92;
}

.guild-selector-caret[b-tt5af750vt] {
    font-size: 0.6rem;
    color: #8a8a92;
}

.guild-selector-menu[b-tt5af750vt] {
    top: calc(100% + 0.25rem);
    z-index: 11;
    min-width: 16rem;
    max-height: 20rem;
    border: 1px solid #d6d5d5;
    padding: 0.35rem;
}

.guild-selector-empty[b-tt5af750vt] {
    padding: 0.5rem 0.75rem;
    color: #8a8a92;
    font-size: 0.85rem;
}

/* background:none stays plain CSS (not Bootstrap's bg-transparent, which is !important and
   would permanently win over the plain :hover rule below trying to override it). */
.guild-selector-item[b-tt5af750vt] {
    background: none;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    gap: 0.6rem;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.guild-selector-item:hover[b-tt5af750vt] {
    background: #f0f0f3;
}

.guild-selector-item-active[b-tt5af750vt] {
    background: #eef1fb;
}

.guild-selector-item-install[b-tt5af750vt] {
    opacity: 0.85;
}

.guild-selector-plus[b-tt5af750vt] {
    color: rgb(5, 39, 103);
}

.guild-selector-divider[b-tt5af750vt] {
    margin: 0.35rem 0.25rem 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid #e5e5e8;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: #8a8a92;
}

/* Matches MainLayout.razor.css's top-row compacting threshold — not the sidebar's own
   641px collapse breakpoint, see that file for why. */
@media (max-width: 900px) {
    .guild-selector-toggle[b-tt5af750vt] {
        max-width: 8.5rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Not Bootstrap's d-flex/flex-column utilities (those are !important, which would
   permanently win over the min-width:641px override below switching this to a row). */
.page[b-izu8ucttnu] {
    display: flex;
    flex-direction: column;
}

.sidebar[b-izu8ucttnu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-izu8ucttnu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    min-height: 3.5rem;
    row-gap: 0.5rem;
}

/* Always a single scrollable line rather than Bootstrap's own default internal wrapping,
   which (once the row runs out of horizontal room) breaks items onto their own lines and
   can strand the first crumb alone — harmless at full desktop width since it never needs
   to actually scroll there. flex-nowrap/overflow-x-auto/flex-shrink-0/text-nowrap live
   directly on PageBreadcrumb's own markup as utility classes; only the scrollbar-hiding
   trio below (no Bootstrap utility equivalent) stays here. */
.top-row[b-izu8ucttnu]  .breadcrumb {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.top-row[b-izu8ucttnu]  .breadcrumb::-webkit-scrollbar {
    display: none;
}

/* Not Bootstrap's gap-* utilities (those are !important, which would permanently win over
   the narrower-width override below) — this value needs to change responsively. */
.topbar-actions[b-izu8ucttnu] {
    gap: 1rem;
}

.topbar-user[b-izu8ucttnu] {
    color: #5a5a63;
}

.topbar-avatar[b-izu8ucttnu] {
    width: 1.75rem;
    height: 1.75rem;
}

/* display:none/inline-flex toggles responsively below — not Bootstrap's d-none (!important,
   would permanently win over the narrower-width override). */
.topbar-avatar-fallback[b-izu8ucttnu] {
    display: none;
    width: 1.75rem;
    height: 1.75rem;
    background-color: #e5e5e8;
    color: #8a8a92;
    font-size: 0.9rem;
}

.topbar-logout-btn[b-izu8ucttnu] {
    gap: 0.35rem;
}

.topbar-logout-icon[b-izu8ucttnu] {
    display: none;
}

/* NOT the same threshold as the sidebar's own 641px collapse breakpoint below — the
   sidebar becomes permanently visible (not hamburger-collapsed) starting at 641px, but its
   fixed 250px width eats into the top row's available space at exactly the point that
   space gets tightest, so a top-row cramped at, say, 660-700px still has a fully-expanded
   sidebar next to it. Everything here is losing information (hidden username, icon-only
   logout, a tighter guild-selector cap) so it's deliberately a much wider cutoff than the
   sidebar's own — only the lossless wrap/scroll behavior above applies unconditionally. */
@media (max-width: 900px) {
    .topbar-actions[b-izu8ucttnu] {
        gap: 0.5rem;
    }

    .topbar-user-name[b-izu8ucttnu] {
        display: none;
    }

    .topbar-avatar-fallback[b-izu8ucttnu] {
        display: inline-flex;
    }

    .topbar-logout-text[b-izu8ucttnu] {
        display: none;
    }

    .topbar-logout-icon[b-izu8ucttnu] {
        display: inline-block;
    }

    .topbar-logout-btn[b-izu8ucttnu] {
        padding: 0.25rem 0.5rem;
    }
}

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

    /* Flex items default to min-width:auto, so main won't shrink below its content's
       intrinsic width — a page with a wide row of cards (e.g. Features) could then force
       .page wider than the viewport instead of wrapping, pushing the fixed-width sidebar
       partly off-screen. This lets main (and its own flex-column content) shrink to fit
       the space actually left over once the sidebar's 250px is accounted for. */
    main[b-izu8ucttnu] {
        min-width: 0;
    }

    .sidebar[b-izu8ucttnu] {
        width: 250px;
        /* Flex items default to flex-shrink:1 — without this, an oversized sibling (main,
           when its content is wider than the space left over) makes the flexbox algorithm
           shrink BOTH items to fit, squeezing the sidebar below its 250px instead of only
           main giving way. This is what was actually seen: the sidebar rendering far
           narrower than 250px, not main overflowing past it. */
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        /* Scroll inside the sidebar itself once its content (nav links) grows taller
           than the viewport, instead of letting it overflow into the page below — an
           overflowing sidebar has nothing to paint its background past the 100vh box,
           so the nav items below the fold rendered on plain white instead of the
           gradient. */
        overflow-y: auto;
    }

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

    .top-row[b-izu8ucttnu], article[b-izu8ucttnu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-u7b9n33yez] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-u7b9n33yez] {
    font-size: 1.1rem;
    gap: 0.6rem;
}

.navbar-brand-icon[b-u7b9n33yez] {
    height: 1.75rem;
    width: 1.75rem;
}

.oi[b-u7b9n33yez] {
    width: 2rem;
    font-size: 1.1rem;
    top: -2px;
}

.nav-item[b-u7b9n33yez] {
    font-size: 0.9rem;
    /* Horizontal padding (was per-link px-3 ps-4 utilities): ps-4 left, px-3 right. */
    padding-left: 1.5rem;
    padding-right: 1rem;
    padding-bottom: 0.25rem;
}

    .nav-item:first-of-type[b-u7b9n33yez] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-u7b9n33yez] {
        padding-bottom: 0.5rem;
    }

    .nav-item[b-u7b9n33yez]  a {
        color: #d7d7d7;
        min-height: 2.25rem;
        line-height: 1.3;
    }

.nav-item[b-u7b9n33yez]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-u7b9n33yez]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* A flat top-level item sits directly in the sidebar with no px-3 wrapper (unlike a
   .nav-item nested inside a NavMenuGroup) -- give it the same width:100% + padding box
   model as .nav-group-toggle so the active/hover background spans edge-to-edge instead of
   being inset by an extra px-3 on top of the link's own padding. Also matches
   .nav-group-toggle's font weight/casing so it reads as a peer of the groups below it,
   not a smaller/plainer link. */
    .nav-item-top[b-u7b9n33yez]  a {
        color: #d7d7d7;
        height: 2.25rem;
        line-height: 2.25rem;
        letter-spacing: 0.03em;
    }

    .nav-item-top[b-u7b9n33yez]  a.active {
        background-color: rgba(255,255,255,0.25);
        color: white;
    }

    .nav-item-top[b-u7b9n33yez]  a:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

/* Breathing room below the last nav group so it isn't flush against the sidebar's
   scroll/viewport bottom edge when the nav is taller than the viewport. */
nav[b-u7b9n33yez] {
    padding-bottom: 1.5rem;
}

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

    .collapse[b-u7b9n33yez] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Components/Layout/NavMenuGroup.razor.rz.scp.css */
.nav-group[b-fs3m95xow2] {
    margin-bottom: 0.15rem;
}

/* Pure CSS checkbox/label toggle -- no interactive circuit needed, works on static SSR pages too
   (same technique as the mobile navbar-toggler in NavMenu.razor.css). */
.nav-group-toggle-checkbox[b-fs3m95xow2] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-group-toggle[b-fs3m95xow2] {
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
    color: #d7d7d7;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    cursor: pointer;
}

    /* NavMenu.razor.css sets a matching width on .oi for its own top-level links, but
       Blazor's CSS isolation scopes that rule to NavMenu's own elements -- it doesn't reach
       this icon, rendered by NavMenuGroup itself. Repeat it here so group headers line up
       with the top-level "Home" link's icon column. */
    .nav-group-toggle .oi[b-fs3m95xow2] {
        width: 2rem;
        font-size: 1.1rem;
    }

    .nav-group-toggle:hover[b-fs3m95xow2] {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

.nav-group-chevron[b-fs3m95xow2] {
    font-size: 0.7rem;
    transition: transform 0.15s ease-in-out;
}

.nav-group-items[b-fs3m95xow2] {
    display: none;
}

.nav-group-toggle-checkbox:checked ~ .nav-group-toggle .nav-group-chevron[b-fs3m95xow2] {
    transform: rotate(90deg);
}

.nav-group-toggle-checkbox:checked ~ .nav-group-items[b-fs3m95xow2] {
    display: block;
}

.nav-group-items[b-fs3m95xow2]  .nav-item {
    font-size: 0.85rem;
}

.nav-group-items[b-fs3m95xow2]  .nav-link {
    padding-left: 0.75rem;
}
/* /Components/Pages/Index.razor.rz.scp.css */
.hero[b-okzrs2h5dh] {
    background: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    color: white;
    padding: 4rem 1.5rem;
}

.hero-inner[b-okzrs2h5dh] {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.hero-text[b-okzrs2h5dh] {
    flex: 1;
}

    .hero-text h1[b-okzrs2h5dh] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

.hero-subtitle[b-okzrs2h5dh] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 40rem;
    margin-bottom: 2rem;
}

.hero-actions[b-okzrs2h5dh] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-portrait[b-okzrs2h5dh] {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.features[b-okzrs2h5dh] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

    .features h2[b-okzrs2h5dh] {
        text-align: center;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

.features-intro[b-okzrs2h5dh] {
    text-align: center;
    color: #5a5a63;
    max-width: 40rem;
    margin: 0 auto 2.5rem;
}

/* Card headings, one rule for every grid on the page (server types, members, per-audience
   features) — these were three near-identical inline style attributes before. */
.features h3[b-okzrs2h5dh] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* The server-type cards' one-liner: smaller than the feature cards' descriptions, which use the
   shared .card-subtext for colour only. */
.audience-tagline[b-okzrs2h5dh] {
    font-size: 0.9rem;
}

.feature-icon[b-okzrs2h5dh] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: rgb(5, 39, 103);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

    .feature-icon .oi[b-okzrs2h5dh] {
        font-size: 1.3rem;
    }

.cta[b-okzrs2h5dh] {
    background: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    color: white;
    text-align: center;
    padding: 3rem 1.5rem;
}

.cta-inner[b-okzrs2h5dh] {
    max-width: 640px;
    margin: 0 auto;
}

    .cta-inner h2[b-okzrs2h5dh] {
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .cta-inner p[b-okzrs2h5dh] {
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 1.5rem;
    }

@media (max-width: 768px) {
    .hero-inner[b-okzrs2h5dh] {
        flex-direction: column;
        text-align: center;
    }

    .hero-actions[b-okzrs2h5dh] {
        justify-content: center;
    }
}
/* /Components/Pages/Manage/Guild/PermissionCheck/ExpectationEditor.razor.rz.scp.css */
.permission-grid[b-32n6l4ta76] {
    max-width: 40rem;
}

    .permission-grid th:not(:first-child)[b-32n6l4ta76],
    .permission-grid td:not(:first-child)[b-32n6l4ta76] {
        width: 5rem;
    }
/* /Components/Shared/AllianceEmblem.razor.rz.scp.css */
.alliance-emblem[b-bk8239547t] {
    object-fit: contain;
    /* Transparent PNGs — no background so the metallic emblem sits cleanly on any surface. */
}

.alliance-emblem-fallback[b-bk8239547t] {
    color: rgb(5, 39, 103);
    opacity: 0.55;
}
/* /Components/Shared/GuildIcon.razor.rz.scp.css */
/* display:flex stays plain CSS, not Bootstrap's d-flex (!important) — this element's
   display toggles via an inline style (image-load-fallback show/hide), and an !important
   class would permanently win over that plain inline toggle. */
.guild-icon-placeholder[b-vu2zzumk2y] {
    display: flex;
    background: rgb(5, 39, 103);
}
/* /Components/Shared/LandingHeader.razor.rz.scp.css */
.landing-nav[b-ntdy3fi7hj] {
    background: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    height: 3.5rem;
    z-index: 1;
}

.landing-nav-inner[b-ntdy3fi7hj] {
    width: 100%;
    max-width: 1140px;
}

.landing-brand[b-ntdy3fi7hj] {
    gap: 0.6rem;
    font-size: 1.2rem;
}

.landing-brand-icon[b-ntdy3fi7hj] {
    height: 2rem;
    width: 2rem;
}
/* /Components/Shared/NotFoundContent.razor.rz.scp.css */
/* Visually dims the whole page like Blazor's own reconnect modal, but stays click-through
   (pointer-events: none) so nav/footer links underneath keep working — this is a purely
   cosmetic dim, not a blocking modal. */
.not-found-overlay[b-jed2mae3ud] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1000;
}

.not-found-wrapper[b-jed2mae3ud] {
    position: relative;
    z-index: 1001;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.not-found-card[b-jed2mae3ud] {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
    padding: 2rem 2.5rem;
    max-width: 480px;
    text-align: center;
    color: #212529;
}

.not-found-card p[b-jed2mae3ud] {
    margin-bottom: 1rem;
}
/* /Components/Shared/RolePicker.razor.rz.scp.css */
/* display: inline-flex + align-items: center on the label (rather than relying on the
   image's own vertical-align, which lines up against the text's font metrics and looks
   subtly off) guarantees the icon centers against the actual text line-box regardless of
   font/size. Harmless when there's no icon — a label with a single text child looks
   identical whether it's inline or inline-flex. */
label[b-e309tt2yo5] {
    display: inline-flex;
    align-items: center;
}

.role-picker-icon[b-e309tt2yo5] {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    margin-left: 0.4rem;
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
.site-footer[b-fmwk5b2yur] {
    border-top: 1px solid #e5e5e8;
    padding: 1.5rem 1.5rem 2rem;
}

.site-footer-disclaimer[b-fmwk5b2yur] {
    color: #5a5a63;
    font-size: 0.8rem;
    max-width: 52rem;
    margin: 0 auto;
}

.site-footer-divider[b-fmwk5b2yur] {
    max-width: 52rem;
    border-top: 1px solid #e5e5e8;
}

.site-footer-meta[b-fmwk5b2yur] {
    color: #5a5a63;
    font-size: 0.85rem;
}

.site-footer-sep[b-fmwk5b2yur] {
    color: #c7c7cc;
}

.site-footer-discord-btn[b-fmwk5b2yur] {
    background: rgb(5, 39, 103);
    color: white;
}

    .site-footer-discord-btn:hover[b-fmwk5b2yur] {
        background: #3a0647;
        color: white;
    }

.site-footer-github-link[b-fmwk5b2yur] {
    color: #5a5a63;
}

    .site-footer-github-link:hover[b-fmwk5b2yur] {
        color: rgb(5, 39, 103);
    }