/* _content/InuniSphere.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-kotdxjpt4q] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-kotdxjpt4q] {
    flex: 1;
}

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

.top-row[b-kotdxjpt4q] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-kotdxjpt4q]  a, .top-row[b-kotdxjpt4q]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-kotdxjpt4q]  a:hover, .top-row[b-kotdxjpt4q]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-kotdxjpt4q]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-kotdxjpt4q] {
        justify-content: space-between;
    }

    .top-row[b-kotdxjpt4q]  a, .top-row[b-kotdxjpt4q]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-kotdxjpt4q] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .top-row.auth[b-kotdxjpt4q]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-kotdxjpt4q], article[b-kotdxjpt4q] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/InuniSphere.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-nfcfh1nuz0] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-nfcfh1nuz0] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-nfcfh1nuz0] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-nfcfh1nuz0] {
    font-size: 1.1rem;
}

.bi[b-nfcfh1nuz0] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-nfcfh1nuz0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-nfcfh1nuz0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-nfcfh1nuz0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-nfcfh1nuz0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-nfcfh1nuz0]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

.nav-scrollable[b-nfcfh1nuz0] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-nfcfh1nuz0] {
    display: block;
}

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

    .nav-scrollable[b-nfcfh1nuz0] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Account/Account.razor.rz.scp.css */
/* Same design tokens/classes as Iam.razor.css and Admin.razor.css — Blazor CSS isolation
   scopes each page's stylesheet to its own markup, so the shared "iam-*" design system gets
   its selectors duplicated per page rather than shared via one global file. Keep in sync with
   Iam.razor.css if either changes. */
.iam-page[b-ulisy46m3b] {
    --iam-space-1: 0.5rem;
    --iam-space-2: 0.75rem;
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-radius-sm: 0.5rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-ulisy46m3b] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-ulisy46m3b],
.iam-breadcrumbs__link[b-ulisy46m3b] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-ulisy46m3b],
.iam-breadcrumbs__link:hover[b-ulisy46m3b] {
    text-decoration: underline;
}

.iam-breadcrumbs__link[b-ulisy46m3b] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.iam-breadcrumbs__sep[b-ulisy46m3b] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-ulisy46m3b] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-ulisy46m3b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-ulisy46m3b] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-ulisy46m3b] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-tabs[b-ulisy46m3b] {
    display: flex;
    gap: var(--iam-space-1);
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
    margin-bottom: var(--iam-space-4);
}

.iam-tabs__item[b-ulisy46m3b] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 0.25rem;
    margin-right: var(--iam-space-4);
    font-weight: 600;
    color: var(--brand-text-muted, #5d7a7a);
    cursor: pointer;
}

.iam-tabs__item:hover[b-ulisy46m3b] {
    color: var(--brand-text-main, #232323);
}

.iam-tabs__item.is-active[b-ulisy46m3b] {
    color: var(--brand-primary, #185354);
    border-bottom-color: var(--brand-primary, #185354);
}

.iam-card[b-ulisy46m3b] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-ulisy46m3b] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-ulisy46m3b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-detail-list[b-ulisy46m3b] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--iam-space-3);
    row-gap: 0.35rem;
    margin-bottom: var(--iam-space-3);
}

.iam-detail-list dt[b-ulisy46m3b] {
    color: var(--brand-muted, #5f7a7a);
    font-weight: 600;
}

.iam-detail-list dd[b-ulisy46m3b] {
    margin: 0;
}

.iam-banner[b-ulisy46m3b] {
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-ulisy46m3b] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner p[b-ulisy46m3b] {
    margin: 0;
}

.iam-banner--info[b-ulisy46m3b] {
    background: #eef6f6;
    border: 1px solid var(--brand-border, #d8e8e8);
    color: #123f40;
}

.iam-banner--error[b-ulisy46m3b] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

@media (max-width: 640px) {
    .iam-header[b-ulisy46m3b] {
        flex-direction: column;
    }

    .iam-card__header[b-ulisy46m3b] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Account/ProfileWizard.razor.rz.scp.css */
/* Same visual language as /admin (see Admin.razor.css's own design-tokens comment) - kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in ProfileWizard.razor picks up nothing
   from Admin.razor.css. */
.iam-page[b-lq168conxt] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-lq168conxt] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-lq168conxt] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-lq168conxt] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-lq168conxt] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-lq168conxt] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-lq168conxt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-lq168conxt] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-lq168conxt] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-lq168conxt] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-lq168conxt] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-lq168conxt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-banner[b-lq168conxt] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-lq168conxt] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-lq168conxt] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

@media (max-width: 640px) {
    .iam-header[b-lq168conxt] {
        flex-direction: column;
    }

    .iam-card__header[b-lq168conxt] {
        flex-direction: column;
        align-items: stretch;
    }
}

.profile-wizard__guardian-row[b-lq168conxt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* Reached from an event's own themed Welcome page (see ProfileWizard.razor's own doc comment) -
   .iam-card/.iam-breadcrumbs/.iam-header above already reference --brand-* custom properties
   with light-theme fallbacks, so ThemedHead alone re-colors accents/borders automatically once
   this class is present; only the page/card backgrounds and body text need an explicit override
   here to avoid a mismatched card against the page background. */
.profile-wizard--themed[b-lq168conxt] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.profile-wizard--themed .iam-header__subtitle[b-lq168conxt] {
    color: var(--brand-text-muted, #5d7a7a);
}

.profile-wizard--themed .iam-card[b-lq168conxt] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

/* Step progress - "Krok X z Y" plus a breadcrumb of section titles, so it's always clear how
   much of the wizard is left (see the redesign's own "onboarding wizard" requirement). */
.wizard-progress[b-lq168conxt] {
    margin-bottom: var(--iam-space-4);
}

.wizard-progress__label[b-lq168conxt] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text-muted, #475569);
}

.wizard-progress__steps[b-lq168conxt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizard-progress__step[b-lq168conxt] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--brand-text-muted, #475569);
}

.wizard-progress__step.is-current[b-lq168conxt] {
    color: var(--brand-primary, #2563eb);
    font-weight: 700;
}

.wizard-progress__step.is-done[b-lq168conxt] {
    color: var(--brand-text-main, #0f172a);
    font-weight: 600;
}

.wizard-progress__arrow[b-lq168conxt] {
    color: var(--brand-border, #cbd5e1);
}

/* Section titles/labels/helper text replace the old ALL-CAPS h6.text-muted headings used when
   this page was one-field-per-card - normal sentence case, with distinct roles for the section
   heading itself vs. a field's own label vs. explanatory helper copy under it. */
.profile-wizard__section-title[b-lq168conxt] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-text-main, #0f172a);
}

.profile-wizard__section-subtitle[b-lq168conxt] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--brand-text-muted, #475569);
}

.profile-wizard__field-grid[b-lq168conxt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.5rem;
}

.profile-wizard__field[b-lq168conxt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-wizard__field-label[b-lq168conxt] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brand-text-main, #0f172a);
}

.profile-wizard__field-help[b-lq168conxt] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #475569);
}

/* A required field that's still blank - the label turns red (same signal as the trailing "*"
   already gives, just louder) and its own input/select/textarea gets a red border, so a
   returning participant landing mid-wizard (see ProfileWizard's OnlyIncomplete) can spot what
   still needs filling in without reading every label. */
.profile-wizard__field--missing > .profile-wizard__field-label[b-lq168conxt] {
    color: #dc2626;
}

.profile-wizard__field--missing > .form-control[b-lq168conxt],
.profile-wizard__field--missing > .form-select[b-lq168conxt] {
    border-color: #dc2626;
}

.profile-wizard__summary[b-lq168conxt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.profile-wizard__summary dt[b-lq168conxt] {
    font-size: 0.85rem;
    color: var(--brand-text-muted, #475569);
}

.profile-wizard__summary dd[b-lq168conxt] {
    margin: 0.15rem 0 0;
    font-weight: 600;
    color: var(--brand-text-main, #0f172a);
}

.profile-wizard__nav[b-lq168conxt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Form control tokens for the redesign - taller, softer-radius inputs with a calm blue focus
   ring instead of Bootstrap's default. Scoped to .profile-wizard so it doesn't leak into other
   pages that happen to share Bootstrap's own classes. */
.profile-wizard .form-control[b-lq168conxt],
.profile-wizard .form-select[b-lq168conxt] {
    min-height: 3rem;
    border-radius: 0.75rem;
    border: 1px solid #cbd5e1;
}

.profile-wizard .form-control:focus[b-lq168conxt],
.profile-wizard .form-select:focus[b-lq168conxt] {
    border-color: var(--brand-primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #2563eb) 20%, transparent);
}

/* Bootstrap's default .form-control is a light control (white background, dark text) - wrong
   on BOOST's dark surface. Same treatment Welcome.razor's own .welcome-form already uses. */
.profile-wizard--themed .form-control[b-lq168conxt],
.profile-wizard--themed .form-select[b-lq168conxt] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-border, #cbd5e1);
    color: var(--brand-text-main, inherit);
}

.profile-wizard--themed .form-control[b-lq168conxt]::placeholder,
.profile-wizard--themed textarea[b-lq168conxt]::placeholder {
    color: var(--brand-text-muted);
    opacity: 0.7;
}

.profile-wizard--themed .form-control:focus[b-lq168conxt],
.profile-wizard--themed .form-select:focus[b-lq168conxt] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-accent, #2563eb);
    color: var(--brand-text-main, inherit);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

/* Native <select> option lists render via OS chrome regardless of the rules above - forcing a
   light background/dark text here at least keeps the closed dropdown legible. */
.profile-wizard--themed .form-select option[b-lq168conxt] {
    background-color: #fff;
    color: #212529;
}

/* A Multi-cardinality parameter's own checkbox options (e.g. dietary restrictions) - boxed and
   laid out in as many columns as fit, same as .form-control's own bordered/rounded treatment,
   rather than a single bare column that can run to 20+ full-width rows for a long option list. */
.profile-wizard__checkbox-group[b-lq168conxt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.profile-wizard__checkbox-group .form-check[b-lq168conxt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    min-width: 0;
}

.profile-wizard__checkbox-group .form-check-input[b-lq168conxt] {
    flex-shrink: 0;
    margin-top: 0;
}

.profile-wizard__checkbox-group .form-check-label[b-lq168conxt] {
    overflow-wrap: anywhere;
}

.profile-wizard__checkbox-group .form-check-input:checked[b-lq168conxt] {
    background-color: var(--brand-primary, #2563eb);
    border-color: var(--brand-primary, #2563eb);
}

.profile-wizard--themed .profile-wizard__checkbox-group[b-lq168conxt] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-border, #cbd5e1);
}

.profile-wizard--themed .profile-wizard__checkbox-group .form-check-label[b-lq168conxt] {
    color: var(--brand-text-main, inherit);
}

.profile-wizard--themed .profile-wizard__checkbox-group .form-check-input:checked[b-lq168conxt] {
    background-color: var(--brand-accent, #2563eb);
    border-color: var(--brand-accent, #2563eb);
}
/* _content/InuniSphere.Web/Components/Pages/Activities/ActivitySelection.razor.rz.scp.css */
/* Same visual language as /admin and TransportWizard.razor's own copy of it - kept as a separate
   copy rather than a shared stylesheet because Blazor CSS isolation scopes rules to the
   component that declares them. */
.iam-page[b-c6ay4lpmzv] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-c6ay4lpmzv] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-c6ay4lpmzv] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-c6ay4lpmzv] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-c6ay4lpmzv] {
    margin: 0 0.4rem;
}

.iam-header[b-c6ay4lpmzv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-c6ay4lpmzv] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-c6ay4lpmzv] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-c6ay4lpmzv] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner[b-c6ay4lpmzv] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-c6ay4lpmzv] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-c6ay4lpmzv] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
}

.iam-banner--success[b-c6ay4lpmzv] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

/* Same theming approach as TransportWizard.razor's own .transport-wizard--themed - ThemedHead
   already re-colors --brand-* custom properties globally once present, so only the page/card
   backgrounds and body text need an explicit override here. */
.activities-page--themed[b-c6ay4lpmzv] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.activities-page--themed .iam-header__subtitle[b-c6ay4lpmzv] {
    color: var(--brand-text-muted, #5d7a7a);
}

.activities-page--themed .iam-card[b-c6ay4lpmzv],
.activities-page--themed .activity-option[b-c6ay4lpmzv] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

.activities-page--themed .text-muted[b-c6ay4lpmzv] {
    color: var(--brand-text-muted, #6c757d) !important;
}

.activity-option[b-c6ay4lpmzv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--brand-radius, 0.6rem);
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: #fff;
}

.activity-option input[type="checkbox"][b-c6ay4lpmzv],
.activity-option input[type="radio"][b-c6ay4lpmzv] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.activity-option.is-selected[b-c6ay4lpmzv] {
    border-color: var(--brand-accent, #185354);
    background: var(--brand-accent-soft, #eef6f6);
}

.activity-option--disabled[b-c6ay4lpmzv] {
    opacity: 0.55;
    cursor: not-allowed;
}

.activity-group__description[b-c6ay4lpmzv] {
    margin-top: 0.35rem;
}

.activity-group__description :first-child[b-c6ay4lpmzv] {
    margin-top: 0;
}

.activity-group__description :last-child[b-c6ay4lpmzv] {
    margin-bottom: 0;
}

.activity-companion-list[b-c6ay4lpmzv] {
    max-height: 16rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.activity-route__map[b-c6ay4lpmzv] {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--brand-radius, 0.6rem);
    border: 1px solid var(--brand-border, #d8e8e8);
}

@media (max-width: 640px) {
    .iam-header[b-c6ay4lpmzv] {
        flex-direction: column;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Admin/Activities.razor.rz.scp.css */
/* Same visual language as /admin (see Admin.razor.css's own design-tokens comment) - kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in Activities.razor picks up nothing
   from Admin.razor.css. */
.iam-page[b-hs8q3t1fy6] {
    --iam-space-1: 0.5rem;
    --iam-space-2: 0.75rem;
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-radius-sm: 0.5rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-hs8q3t1fy6] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-hs8q3t1fy6] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-hs8q3t1fy6] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-hs8q3t1fy6] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-hs8q3t1fy6] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-hs8q3t1fy6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-hs8q3t1fy6] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-hs8q3t1fy6] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-hs8q3t1fy6] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-hs8q3t1fy6] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-banner[b-hs8q3t1fy6] {
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-hs8q3t1fy6] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner p[b-hs8q3t1fy6] {
    margin: 0;
}

.iam-banner--error[b-hs8q3t1fy6] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

.iam-table td[b-hs8q3t1fy6],
.iam-table th[b-hs8q3t1fy6] {
    padding: var(--iam-space-2) var(--iam-space-3);
}

.iam-table tbody tr:hover[b-hs8q3t1fy6] {
    background: var(--brand-accent-soft, #f4fafa);
}

.activity-route-card[b-hs8q3t1fy6] {
    background: #fbfcfc;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3);
}

.activity-route-card__map[b-hs8q3t1fy6] {
    max-width: 16rem;
    max-height: 10rem;
    display: block;
    border-radius: var(--iam-radius-sm);
    border: 1px solid var(--brand-border, #d8e8e8);
}

@media (max-width: 640px) {
    .iam-header[b-hs8q3t1fy6] {
        flex-direction: column;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Admin/Admin.razor.rz.scp.css */
/* Same visual language as /iam (see Iam.razor.css's own design-tokens comment) — kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in Admin.razor picks up nothing from
   Iam.razor.css. */
.iam-page[b-ebn7kr2rvs] {
    --iam-space-1: 0.5rem;
    --iam-space-2: 0.75rem;
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-radius-sm: 0.5rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-ebn7kr2rvs] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-ebn7kr2rvs] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-ebn7kr2rvs] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-ebn7kr2rvs] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-ebn7kr2rvs] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-ebn7kr2rvs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-ebn7kr2rvs] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-ebn7kr2rvs] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

/* Same horizontal tabs as /iam (see Iam.razor.css's own doc comment) - splits the page into
   Serie i wydarzenia/Dashboard/Konkursy sections instead of one long scroll. */
.iam-tabs[b-ebn7kr2rvs] {
    display: flex;
    gap: var(--iam-space-1);
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
    margin-bottom: var(--iam-space-4);
}

.iam-tabs__item[b-ebn7kr2rvs] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 0.25rem;
    margin-right: var(--iam-space-4);
    font-weight: 600;
    color: var(--brand-text-muted, #5d7a7a);
    cursor: pointer;
}

.iam-tabs__item:hover[b-ebn7kr2rvs] {
    color: var(--brand-text-main, #232323);
}

.iam-tabs__item.is-active[b-ebn7kr2rvs] {
    color: var(--brand-primary, #185354);
    border-bottom-color: var(--brand-primary, #185354);
}

/* Pushes "Oceniaj rozwiązania" to the far right of the row, with its own left border below,
   so it reads as a separate workflow rather than a fourth peer of Serie i wydarzenia/
   Dashboard/Konkursy (which all browse/manage the same admin data). */
.iam-tabs__spacer[b-ebn7kr2rvs] {
    flex: 1 1 auto;
}

.iam-tabs__item--grading[b-ebn7kr2rvs] {
    margin-right: 0;
    padding-left: var(--iam-space-4);
    border-left: 1px solid var(--brand-border, #d8e8e8);
}

.iam-header__context[b-ebn7kr2rvs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.iam-card[b-ebn7kr2rvs] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-ebn7kr2rvs] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

/* A card-styled block inside another .iam-card (e.g. Karta Kwalifikacyjna's Section I fields) -
   same bordered look, without stacking a second shadow/margin on top of the parent card's own. */
.iam-card--nested[b-ebn7kr2rvs] {
    box-shadow: none;
    margin-bottom: 0;
    background: var(--brand-accent-soft, #f4fafa);
}

.iam-card__header[b-ebn7kr2rvs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-card__actions[b-ebn7kr2rvs] {
    display: flex;
    align-items: center;
    gap: var(--iam-space-2);
    flex-wrap: wrap;
}

.iam-banner[b-ebn7kr2rvs] {
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-ebn7kr2rvs] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner p[b-ebn7kr2rvs] {
    margin: 0;
}

.iam-banner--error[b-ebn7kr2rvs] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

.iam-table td[b-ebn7kr2rvs],
.iam-table th[b-ebn7kr2rvs] {
    padding: var(--iam-space-2) var(--iam-space-3);
}

.iam-table tbody tr:hover[b-ebn7kr2rvs] {
    background: var(--brand-accent-soft, #f4fafa);
}

.admin-series-group[b-ebn7kr2rvs] {
    margin-bottom: var(--iam-space-5);
}

.admin-series-header[b-ebn7kr2rvs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    background: var(--brand-accent-soft, #f4fafa);
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-3);
}

.admin-series-header h2[b-ebn7kr2rvs] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

@media (max-width: 640px) {
    .iam-header[b-ebn7kr2rvs] {
        flex-direction: column;
    }

    .iam-card__header[b-ebn7kr2rvs] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-series-header[b-ebn7kr2rvs] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* "Dodaj rozwiązania w imieniu uczestników" camera flow - the <video>/thumbnails elements
   themselves are plain empty Blazor-rendered containers that wwwroot/js/contest-scan.js owns
   directly (populates/mutates outside Blazor's own diffing), same convention as
   PdfAnnotationViewer.razor's own JS-owned canvas stack. */
.contest-scan__video[b-ebn7kr2rvs] {
    width: 100%;
    max-width: 28rem;
    border-radius: var(--brand-radius, 0.6rem);
    background: #000;
}

.contest-scan__thumbnails[b-ebn7kr2rvs] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.contest-scan__thumb[b-ebn7kr2rvs] {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: var(--brand-radius, 0.6rem);
    border: 1px solid var(--brand-border, #d8e8e8);
}
/* _content/InuniSphere.Web/Components/Pages/Admin/Review/ContestReviewWorkspace.razor.rz.scp.css */
/* Admin-side page (InuniNav, not BoostNav) - light INUNI palette, same tokens as Admin.razor.css/
   Iam.razor.css rather than the dark BOOST palette Contest.razor.css uses for the
   participant-facing pages. Everything from "Layout" on is ::deep because it's rendered by the
   PdfAnnotationViewer/ReviewSidebar child components, not by this page directly - see
   Contest.razor.css's own comment for why Blazor CSS isolation requires that. */
.iam-page[b-qqsxoucc3w] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-radius: 0.6rem;
    max-width: 100%;
    padding: 0 1.5rem 2rem;
}

.iam-breadcrumbs[b-qqsxoucc3w] {
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-qqsxoucc3w] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-qqsxoucc3w] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-qqsxoucc3w] {
    margin: 0 0.4rem;
}

.iam-banner[b-qqsxoucc3w] {
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    margin: 1rem 1.5rem;
}

.iam-banner--error[b-qqsxoucc3w] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
}

.review-workspace-page[b-qqsxoucc3w] {
    padding: 0 1.5rem 1.5rem;
}

.contest-title[b-qqsxoucc3w] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.contest-meta[b-qqsxoucc3w] {
    font-size: 14px;
    font-weight: 500;
}

.contest-secondary[b-qqsxoucc3w] {
    font-size: 13px;
    color: var(--brand-text-muted, #5d7a7a);
    margin: 0;
}

.review-workspace__header[b-qqsxoucc3w] {
    padding: 1rem 0;
}

.review-workspace__body[b-qqsxoucc3w] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(20rem, 1fr);
    gap: 1.25rem;
    align-items: start;
    height: calc(100vh - 220px);
}

.review-workspace__viewer[b-qqsxoucc3w],
.review-workspace__sidebar[b-qqsxoucc3w] {
    height: 100%;
    min-height: 0;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    overflow: hidden;
    background: #fff;
}

@media (max-width: 1000px) {
    .review-workspace__body[b-qqsxoucc3w] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .review-workspace__viewer[b-qqsxoucc3w] {
        height: 70vh;
    }
}

/* ============ PDF viewer ============ */

[b-qqsxoucc3w] .pdf-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-qqsxoucc3w] .pdf-viewer__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
    flex: 0 0 auto;
    flex-wrap: wrap;
}

[b-qqsxoucc3w] .pdf-viewer__tool-group {
    display: flex;
    gap: 0.25rem;
}

[b-qqsxoucc3w] .pdf-viewer__tool {
    appearance: none;
    border: 1px solid var(--brand-border, #d8e8e8);
    background: #fff;
    border-radius: 0.4rem;
    min-width: 2.1rem;
    height: 2.1rem;
    cursor: pointer;
    font-size: 0.95rem;
}

[b-qqsxoucc3w] .pdf-viewer__tool:hover {
    border-color: var(--brand-primary, #185354);
}

[b-qqsxoucc3w] .pdf-viewer__tool.is-active {
    background: var(--brand-primary, #185354);
    color: #fff;
    border-color: var(--brand-primary, #185354);
}

[b-qqsxoucc3w] .pdf-viewer__viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #525659;
    position: relative;
}

[b-qqsxoucc3w] .pdf-viewer__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transform-origin: 0 0;
    width: max-content;
}

[b-qqsxoucc3w] .pdf-page {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    background: #fff;
}

[b-qqsxoucc3w] .pdf-page canvas {
    position: absolute;
    top: 0;
    left: 0;
}

[b-qqsxoucc3w] .pdf-page__marks-canvas {
    pointer-events: none;
}

[b-qqsxoucc3w] .pdf-page__pins {
    position: absolute;
    inset: 0;
}

[b-qqsxoucc3w] .pdf-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    appearance: none;
    border: 2px solid #fff;
    border-radius: 999px;
    width: 1.75rem;
    height: 1.75rem;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[b-qqsxoucc3w] .pdf-pin--pulse {
    animation: pdf-pin-pulse-b-qqsxoucc3w 0.5s ease-in-out 2;
}

@keyframes pdf-pin-pulse-b-qqsxoucc3w {
    0%, 100% { transform: translate(-50%, -100%) scale(1); }
    50% { transform: translate(-50%, -100%) scale(1.4); }
}

/* ============ Review sidebar ============ */

[b-qqsxoucc3w] .review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
}

[b-qqsxoucc3w] .review-sidebar__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
}

[b-qqsxoucc3w] .review-sidebar__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--brand-accent-soft, #eef6f6);
}

[b-qqsxoucc3w] .review-sidebar__summary-score {
    font-size: 1.5rem;
    font-weight: 700;
}

[b-qqsxoucc3w] .review-sidebar__summary-counts {
    display: flex;
    gap: 0.6rem;
    font-size: 0.85rem;
}

[b-qqsxoucc3w] .review-sidebar__count--error { color: #ef4444; }
[b-qqsxoucc3w] .review-sidebar__count--suggestion { color: #3b82f6; }
[b-qqsxoucc3w] .review-sidebar__count--positive { color: #22c55e; }

[b-qqsxoucc3w] .review-sidebar__section {
    border-top: 1px solid var(--brand-border, #d8e8e8);
    padding-top: 0.75rem;
}

[b-qqsxoucc3w] .review-sidebar__section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-text-muted, #5d7a7a);
    margin: 0 0 0.5rem;
}

[b-qqsxoucc3w] .review-sidebar__criterion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-qqsxoucc3w] .review-sidebar__criterion-input {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-qqsxoucc3w] .review-sidebar__criterion-input input {
    max-width: 5rem;
}

[b-qqsxoucc3w] .review-sidebar__composer {
    background: var(--brand-accent-soft, #eef6f6);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border-top: none;
}

[b-qqsxoucc3w] .review-sidebar__category-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

[b-qqsxoucc3w] .review-sidebar__category-btn {
    appearance: none;
    border: 1px solid var(--brand-border, #d8e8e8);
    background: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

[b-qqsxoucc3w] .review-sidebar__category-btn.is-active {
    border-color: currentColor;
    font-weight: 700;
}

[b-qqsxoucc3w] .review-sidebar__category-btn--error { color: #ef4444; }
[b-qqsxoucc3w] .review-sidebar__category-btn--issue { color: #f59e0b; }
[b-qqsxoucc3w] .review-sidebar__category-btn--suggestion { color: #3b82f6; }
[b-qqsxoucc3w] .review-sidebar__category-btn--positive { color: #22c55e; }

[b-qqsxoucc3w] .review-sidebar__templates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

[b-qqsxoucc3w] .review-sidebar__template-btn {
    appearance: none;
    border: 1px dashed var(--brand-border, #d8e8e8);
    background: #fff;
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}

[b-qqsxoucc3w] .review-sidebar__template-btn:hover {
    border-color: var(--brand-primary, #185354);
}

[b-qqsxoucc3w] .review-sidebar__comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-qqsxoucc3w] .review-sidebar__comment {
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-left: 4px solid #888;
    background: #f8f9fa;
}

[b-qqsxoucc3w] .review-sidebar__comment--error { border-left-color: #ef4444; }
[b-qqsxoucc3w] .review-sidebar__comment--issue { border-left-color: #f59e0b; }
[b-qqsxoucc3w] .review-sidebar__comment--suggestion { border-left-color: #3b82f6; }
[b-qqsxoucc3w] .review-sidebar__comment--positive { border-left-color: #22c55e; }

[b-qqsxoucc3w] .review-sidebar__comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-qqsxoucc3w] .review-sidebar__comment-text {
    margin: 0.35rem 0;
    font-size: 0.9rem;
}

[b-qqsxoucc3w] .review-sidebar__comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-qqsxoucc3w] .review-sidebar__comment-delete {
    appearance: none;
    border: none;
    background: none;
    color: #a12626;
    font-size: 0.75rem;
    cursor: pointer;
}

[b-qqsxoucc3w] .review-sidebar__audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
}

[b-qqsxoucc3w] .review-sidebar__audit-item {
    display: flex;
    flex-direction: column;
}

[b-qqsxoucc3w] .review-sidebar__nav {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--brand-border, #d8e8e8);
}
/* _content/InuniSphere.Web/Components/Pages/Admin/Transportation.razor.rz.scp.css */
/* Same visual language as /admin (see Admin.razor.css's own design-tokens comment) - kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in Transportation.razor picks up nothing
   from Admin.razor.css. */
.iam-page[b-giclt5f8rx] {
    --iam-space-1: 0.5rem;
    --iam-space-2: 0.75rem;
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-radius-sm: 0.5rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-giclt5f8rx] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-giclt5f8rx] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-giclt5f8rx] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-giclt5f8rx] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-giclt5f8rx] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-giclt5f8rx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-giclt5f8rx] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-giclt5f8rx] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-header__context[b-giclt5f8rx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.iam-card[b-giclt5f8rx] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-giclt5f8rx] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-giclt5f8rx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-card__actions[b-giclt5f8rx] {
    display: flex;
    align-items: center;
    gap: var(--iam-space-2);
    flex-wrap: wrap;
}

.iam-banner[b-giclt5f8rx] {
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-giclt5f8rx] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner p[b-giclt5f8rx] {
    margin: 0;
}

.iam-banner--error[b-giclt5f8rx] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

.iam-table td[b-giclt5f8rx],
.iam-table th[b-giclt5f8rx] {
    padding: var(--iam-space-2) var(--iam-space-3);
}

.iam-table tbody tr:hover[b-giclt5f8rx] {
    background: var(--brand-accent-soft, #f4fafa);
}

@media (max-width: 640px) {
    .iam-header[b-giclt5f8rx] {
        flex-direction: column;
    }

    .iam-card__header[b-giclt5f8rx] {
        flex-direction: column;
        align-items: stretch;
    }
}

.capacity-bar[b-giclt5f8rx] {
    width: 100%;
    height: 0.6rem;
    background: var(--brand-accent-soft, #eef6f6);
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--brand-radius, 0.6rem);
    overflow: hidden;
    margin-top: 0.25rem;
}

.capacity-bar__fill[b-giclt5f8rx] {
    height: 100%;
    background: var(--brand-primary, #185354);
    border-radius: var(--brand-radius, 0.6rem) 0 0 var(--brand-radius, 0.6rem);
}

.transport-staff-photo[b-giclt5f8rx] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* _content/InuniSphere.Web/Components/Pages/Contest/Contest.razor.rz.scp.css */
/* Base page chrome shared with every other themed page (RoomSelection/Documents/ProfileWizard) -
   kept as a separate copy since Blazor CSS isolation scopes rules to the component that
   declares them. These four rules stay UNscoped-as-usual (no ::deep) because .iam-page itself is
   Contest.razor's own directly-rendered wrapper - its custom properties below cascade to every
   descendant (including child components) through normal CSS inheritance regardless of scoping.
   Everything from the "Typography hierarchy" section on IS ::deep, because it's rendered by the
   new ContestCard/ContestTaskCard/ContestLeaderboardWidget/ContestFileDropzone child components,
   not by Contest.razor directly - Blazor CSS isolation only scopes a rule to elements the
   DECLARING component itself renders, not to a child component's own markup, so without ::deep
   none of this would apply to a single card on the page. Fallback color values intentionally use
   the palette specified for this redesign (close to, but not identical to, boost.json's real
   values) - real BOOST events still render boost.json's own colors via ThemedHead's --brand-*
   overrides; these fallbacks only kick in if theme resolution ever fails. */
.iam-page[b-xe89fwhgep] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --contest-success: #22c55e;
    --contest-warning: #f59e0b;
    --contest-danger: #ef4444;
    --contest-info: #3b82f6;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-xe89fwhgep] {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #c7bfe0);
}

.iam-breadcrumbs a[b-xe89fwhgep] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-xe89fwhgep] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-xe89fwhgep] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-xe89fwhgep] {
    color: var(--brand-text-main, #fff);
    font-weight: 600;
}

.iam-banner[b-xe89fwhgep] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-xe89fwhgep] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-xe89fwhgep] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    max-width: 76rem;
    margin: var(--iam-space-4) auto;
}

.room-selection--themed[b-xe89fwhgep] {
    background: var(--brand-page-bg, #0a0714);
    color: var(--brand-text-main, #ffffff);
}

/* ============ Typography hierarchy ============ */

[b-xe89fwhgep] .contest-page-title {
    font-size: 36px;
    font-weight: 700;
    margin: var(--iam-space-4) 0 0.25rem;
}

[b-xe89fwhgep] .contest-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

[b-xe89fwhgep] .contest-task-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

[b-xe89fwhgep] .contest-meta {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-text-main, #ffffff);
}

[b-xe89fwhgep] .contest-secondary {
    font-size: 13px;
    color: var(--brand-text-muted, #c7bfe0);
    margin: 0 0 0.5rem;
}

[b-xe89fwhgep] .contest-page-header {
    margin-bottom: var(--iam-space-4);
}

/* ============ Top summary stat widgets ============ */

[b-xe89fwhgep] .contest-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

[b-xe89fwhgep] .contest-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    border: 1px solid var(--brand-border, #2a1f47);
    border-radius: var(--iam-radius);
    background: var(--brand-surface, #131021);
}

[b-xe89fwhgep] .contest-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-primary, #d05cff);
}

[b-xe89fwhgep] .contest-stat__label {
    font-size: 13px;
    color: var(--brand-text-muted, #c7bfe0);
}

/* ============ Contest card ============ */

[b-xe89fwhgep] .contest-card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--brand-border, #2a1f47) 70%, transparent);
    border-radius: 1.1rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand-surface, #131021) 85%, white 8%), var(--brand-surface, #131021));
    backdrop-filter: blur(6px);
    padding: 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

[b-xe89fwhgep] .contest-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary, #d05cff) 45%, var(--brand-border, #2a1f47));
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24), 0 16px 32px rgba(0, 0, 0, 0.24);
}

[b-xe89fwhgep] .contest-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--iam-space-3);
    flex-wrap: wrap;
}

[b-xe89fwhgep] .contest-card__window {
    margin: 0.9rem 0 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--brand-surface, #131021) 40%, black 12%);
    border: 1px solid color-mix(in srgb, var(--brand-border, #2a1f47) 60%, transparent);
}

[b-xe89fwhgep] .contest-card__window-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-text-muted, #c7bfe0);
    margin-bottom: 0.25rem;
}

[b-xe89fwhgep] .contest-card__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 var(--iam-space-4);
}

[b-xe89fwhgep] .contest-card__columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
    gap: 2rem;
    align-items: start;
}

[b-xe89fwhgep] .contest-card__tasks {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

[b-xe89fwhgep] .contest-card__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-3);
}

[b-xe89fwhgep] .contest-card__leaderboard {
    border: 1px solid var(--brand-border, #2a1f47);
    border-radius: var(--iam-radius);
    padding: var(--iam-space-3);
    background: color-mix(in srgb, var(--brand-surface, #131021) 60%, black 8%);
}

[b-xe89fwhgep] .contest-leaderboard__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    [b-xe89fwhgep] .contest-card__columns {
        grid-template-columns: 1fr;
    }
}

/* ============ Status badge ============ */

[b-xe89fwhgep] .contest-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

[b-xe89fwhgep] .contest-status-badge--open {
    background: rgba(34, 197, 94, 0.15);
    color: var(--contest-success);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

[b-xe89fwhgep] .contest-status-badge--closed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--contest-danger);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

[b-xe89fwhgep] .contest-status-badge--awaiting {
    background: rgba(245, 158, 11, 0.15);
    color: var(--contest-warning);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

[b-xe89fwhgep] .contest-status-badge--graded {
    background: rgba(34, 197, 94, 0.15);
    color: var(--contest-success);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

[b-xe89fwhgep] .contest-status-badge--not-started {
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-text-muted, #c7bfe0);
    border: 1px solid var(--brand-border, #2a1f47);
}

/* ============ Chips ============ */

[b-xe89fwhgep] .contest-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 13px;
    background: color-mix(in srgb, var(--brand-surface, #131021) 40%, black 10%);
    border: 1px solid var(--brand-border, #2a1f47);
    color: var(--brand-text-main, #ffffff);
}

[b-xe89fwhgep] .contest-chip--accent {
    border-color: color-mix(in srgb, var(--brand-primary, #d05cff) 50%, transparent);
    color: var(--brand-primary, #d05cff);
}

[b-xe89fwhgep] .contest-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--brand-primary, #d05cff) 35%, var(--brand-border, #2a1f47));
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 10%, transparent);
    color: var(--brand-text-main, #ffffff);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-xe89fwhgep] .contest-action-btn:hover {
    border-color: var(--brand-primary, #d05cff);
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 20%, transparent);
    color: var(--brand-primary, #d05cff);
}

/* ============ Status box (attempts-exhausted/closed-for-submission notices) ============ */

[b-xe89fwhgep] .contest-status-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 500;
}

[b-xe89fwhgep] .contest-status-box--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--brand-text-main, #ffffff);
}

[b-xe89fwhgep] .contest-status-box--warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--brand-text-main, #ffffff);
}

/* ============ Task card ============ */

[b-xe89fwhgep] .contest-task-card {
    border: 1px solid color-mix(in srgb, var(--brand-border, #2a1f47) 70%, transparent);
    border-radius: 0.75rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--brand-surface, #131021) 55%, white 4%);
}

[b-xe89fwhgep] .contest-task-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

[b-xe89fwhgep] .contest-task-card__pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0;
}

[b-xe89fwhgep] .contest-task-card__submitted-at {
    margin: 0;
}

/* ============ Generic badge (submission/evaluation pills) ============ */

[b-xe89fwhgep] .contest-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

[b-xe89fwhgep] .contest-badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--contest-success);
}

[b-xe89fwhgep] .contest-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--contest-warning);
}

[b-xe89fwhgep] .contest-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--contest-danger);
}

[b-xe89fwhgep] .contest-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--contest-info);
}

[b-xe89fwhgep] .contest-badge--neutral {
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-text-muted, #c7bfe0);
}

/* ============ Result block ============ */

[b-xe89fwhgep] .contest-result {
    border: 1px solid var(--brand-border, #2a1f47);
    border-radius: 0.65rem;
    padding: var(--iam-space-3);
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 8%, var(--brand-surface, #131021));
    margin: 0.5rem 0;
}

[b-xe89fwhgep] .contest-result__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-text-muted, #c7bfe0);
    margin-bottom: 0.2rem;
}

[b-xe89fwhgep] .contest-result__score {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-text-main, #ffffff);
}

[b-xe89fwhgep] .contest-result__pct {
    font-size: 14px;
    font-weight: 600;
    color: var(--contest-success);
}

[b-xe89fwhgep] .contest-result__rank {
    font-size: 13px;
    color: var(--brand-text-muted, #c7bfe0);
    margin-top: 0.2rem;
}

[b-xe89fwhgep] .contest-result__comment {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* ============ Drag-and-drop dropzone ============ */

[b-xe89fwhgep] .contest-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1.5px dashed var(--brand-border, #2a1f47);
    border-radius: 0.65rem;
    padding: var(--iam-space-3);
    cursor: pointer;
    background: color-mix(in srgb, var(--brand-surface, #131021) 50%, black 6%);
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-xe89fwhgep] .contest-dropzone:hover,
[b-xe89fwhgep] .contest-dropzone--dragover {
    border-color: var(--brand-primary, #d05cff);
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 10%, var(--brand-surface, #131021));
}

[b-xe89fwhgep] .contest-dropzone--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

[b-xe89fwhgep] .contest-dropzone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

[b-xe89fwhgep] .contest-dropzone__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-xe89fwhgep] .contest-dropzone__icon {
    font-size: 1.8rem;
    line-height: 1;
}

/* ============ Submission history timeline ============ */

[b-xe89fwhgep] .contest-timeline {
    margin-top: 0.75rem;
    border-top: 1px solid var(--brand-border, #2a1f47);
    padding-top: 0.6rem;
}

[b-xe89fwhgep] .contest-timeline__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

[b-xe89fwhgep] .contest-timeline__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 14px;
    padding: 0.3rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-border, #2a1f47) 60%, transparent);
}

[b-xe89fwhgep] .contest-timeline__item:last-child {
    border-bottom: none;
}

[b-xe89fwhgep] .contest-timeline__item a {
    color: var(--brand-primary, #d05cff);
    text-decoration: none;
}

[b-xe89fwhgep] .contest-timeline__item a:hover {
    text-decoration: underline;
}

/* ============ Leaderboard widget ============ */

[b-xe89fwhgep] .contest-leaderboard__empty {
    margin: 0;
}

[b-xe89fwhgep] .contest-leaderboard__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

[b-xe89fwhgep] .contest-leaderboard__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 14px;
}

[b-xe89fwhgep] .contest-leaderboard__row--me {
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 14%, transparent);
    font-weight: 600;
}

[b-xe89fwhgep] .contest-leaderboard__rank {
    color: var(--brand-primary, #d05cff);
    font-weight: 700;
    min-width: 2.2rem;
}

[b-xe89fwhgep] .contest-leaderboard__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-xe89fwhgep] .contest-leaderboard__score {
    color: var(--brand-text-muted, #c7bfe0);
    font-size: 13px;
}

[b-xe89fwhgep] .contest-leaderboard__me-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--brand-border, #2a1f47);
}

[b-xe89fwhgep] .contest-leaderboard__view-all {
    appearance: none;
    background: none;
    border: none;
    color: var(--brand-primary, #d05cff);
    font-size: 13px;
    font-weight: 600;
    padding: 0.5rem 0 0;
    cursor: pointer;
    text-align: left;
}

[b-xe89fwhgep] .contest-leaderboard__view-all:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    [b-xe89fwhgep] .contest-card__header {
        flex-direction: column;
    }
}

/* ============ Participant feedback modal (read-only PdfAnnotationViewer + ReviewSidebar) ============
   Same component classes ContestReviewWorkspace.razor.css defines for the grader workspace, but
   this is a SEPARATE page's component tree (Blazor CSS isolation only scopes to the declaring
   page), so they need their own copy here - adapted to this page's dark theme instead of Admin's
   light one, since the --brand-* variables resolve to whichever real values ThemedHead injected
   on THIS page regardless of the fallback literals below. */

[b-xe89fwhgep] .contest-feedback-modal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: 1rem;
    height: 70vh;
}

[b-xe89fwhgep] .contest-feedback-modal__viewer,
[b-xe89fwhgep] .contest-feedback-modal__sidebar {
    height: 100%;
    min-height: 0;
    border: 1px solid var(--brand-border, #2a1f47);
    border-radius: 0.65rem;
    overflow: hidden;
}

@media (max-width: 900px) {
    [b-xe89fwhgep] .contest-feedback-modal {
        grid-template-columns: 1fr;
        height: auto;
    }

    [b-xe89fwhgep] .contest-feedback-modal__viewer {
        height: 50vh;
    }
}

[b-xe89fwhgep] .pdf-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-xe89fwhgep] .pdf-viewer__toolbar {
    display: none;
}

[b-xe89fwhgep] .pdf-viewer__viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #1a1625;
    position: relative;
}

[b-xe89fwhgep] .pdf-viewer__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transform-origin: 0 0;
    width: max-content;
}

[b-xe89fwhgep] .pdf-page {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    background: #fff;
}

[b-xe89fwhgep] .pdf-page canvas {
    position: absolute;
    top: 0;
    left: 0;
}

[b-xe89fwhgep] .pdf-page__marks-canvas {
    pointer-events: none;
}

[b-xe89fwhgep] .pdf-page__pins {
    position: absolute;
    inset: 0;
}

[b-xe89fwhgep] .pdf-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    appearance: none;
    border: 2px solid #fff;
    border-radius: 999px;
    width: 1.75rem;
    height: 1.75rem;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[b-xe89fwhgep] .pdf-pin--pulse {
    animation: contest-pdf-pin-pulse-b-xe89fwhgep 0.5s ease-in-out 2;
}

@keyframes contest-pdf-pin-pulse-b-xe89fwhgep {
    0%, 100% { transform: translate(-50%, -100%) scale(1); }
    50% { transform: translate(-50%, -100%) scale(1.4); }
}

[b-xe89fwhgep] .review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    background: var(--brand-surface, #131021);
    color: var(--brand-text-main, #ffffff);
}

[b-xe89fwhgep] .review-sidebar__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--brand-border, #2a1f47);
}

[b-xe89fwhgep] .review-sidebar__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--brand-primary, #d05cff) 10%, transparent);
}

[b-xe89fwhgep] .review-sidebar__summary-score {
    font-size: 1.5rem;
    font-weight: 700;
}

[b-xe89fwhgep] .review-sidebar__summary-counts {
    display: flex;
    gap: 0.6rem;
    font-size: 0.85rem;
}

[b-xe89fwhgep] .review-sidebar__count--error { color: var(--contest-danger); }
[b-xe89fwhgep] .review-sidebar__count--suggestion { color: var(--contest-info); }
[b-xe89fwhgep] .review-sidebar__count--positive { color: var(--contest-success); }

[b-xe89fwhgep] .review-sidebar__section {
    border-top: 1px solid var(--brand-border, #2a1f47);
    padding-top: 0.75rem;
}

[b-xe89fwhgep] .review-sidebar__section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-text-muted, #c7bfe0);
    margin: 0 0 0.5rem;
}

[b-xe89fwhgep] .review-sidebar__criterion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-xe89fwhgep] .review-sidebar__criterion-score {
    font-weight: 600;
}

[b-xe89fwhgep] .review-sidebar__comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-xe89fwhgep] .review-sidebar__comment {
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-left: 4px solid #888;
    background: color-mix(in srgb, var(--brand-surface, #131021) 60%, black 10%);
}

[b-xe89fwhgep] .review-sidebar__comment--error { border-left-color: var(--contest-danger); }
[b-xe89fwhgep] .review-sidebar__comment--issue { border-left-color: var(--contest-warning); }
[b-xe89fwhgep] .review-sidebar__comment--suggestion { border-left-color: var(--contest-info); }
[b-xe89fwhgep] .review-sidebar__comment--positive { border-left-color: var(--contest-success); }

[b-xe89fwhgep] .review-sidebar__comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-xe89fwhgep] .review-sidebar__comment-text {
    margin: 0.35rem 0;
    font-size: 0.9rem;
}
/* _content/InuniSphere.Web/Components/Pages/Documents/Documents.razor.rz.scp.css */
/* Same visual language as /admin (see Admin.razor.css's own design-tokens comment) - kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in Documents.razor picks up nothing from
   ProfileWizard.razor.css even though this page reuses several of its class names. */
.iam-page[b-7tdmru89wv] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-7tdmru89wv] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-7tdmru89wv] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-7tdmru89wv] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-7tdmru89wv] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-7tdmru89wv] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-7tdmru89wv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-7tdmru89wv] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-7tdmru89wv] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-7tdmru89wv] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-7tdmru89wv] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-7tdmru89wv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-banner[b-7tdmru89wv] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-7tdmru89wv] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-7tdmru89wv] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

/* Staff feedback on a submission isn't an error - neutral/informational styling that still
   follows the theme (unlike --error's fixed light-mode colors above). */
.iam-banner--info[b-7tdmru89wv] {
    background: var(--brand-accent-soft, #eef6f6);
    border: 1px solid var(--brand-border, #d8e8e8);
    color: var(--brand-text-main, inherit);
}

@media (max-width: 640px) {
    .iam-header[b-7tdmru89wv] {
        flex-direction: column;
    }

    .iam-card__header[b-7tdmru89wv] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Same theming approach as ProfileWizard.razor.css's own .profile-wizard--themed - .iam-card/
   .iam-breadcrumbs/.iam-header above already reference --brand-* custom properties with
   light-theme fallbacks, so ThemedHead alone re-colors accents/borders automatically once this
   class is present; only the page/card backgrounds and body text need an explicit override. */
.profile-wizard--themed[b-7tdmru89wv] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.profile-wizard--themed .iam-header__subtitle[b-7tdmru89wv] {
    color: var(--brand-text-muted, #5d7a7a);
}

.profile-wizard--themed .iam-card[b-7tdmru89wv] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

/* Bootstrap's default .form-control is a light control (white background, dark text) - wrong
   on BOOST's dark surface. Same treatment ProfileWizard.razor.css/Welcome.razor's own
   .welcome-form already use. Also covers the file input's own "Choose file" pseudo-button,
   which otherwise keeps its default light OS/browser styling regardless of the input's own
   background. */
.profile-wizard--themed .form-control[b-7tdmru89wv] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-border, #cbd5e1);
    color: var(--brand-text-main, inherit);
}

.profile-wizard--themed .form-control[b-7tdmru89wv]::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid var(--brand-border, #cbd5e1);
    background: var(--brand-accent, #2563eb);
    color: var(--brand-primary-contrast, #fff);
}

.profile-wizard--themed .form-control[b-7tdmru89wv]::file-selector-button:hover {
    background: var(--brand-accent-strong, #1d4ed8);
}

/* Bootstrap's .text-muted is a fixed grey tuned for a light card - on Boost's dark
   --brand-surface card that grey is nearly invisible, so it needs to follow the theme's own
   muted color instead. */
.profile-wizard--themed .text-muted[b-7tdmru89wv] {
    color: var(--brand-text-muted, #6c757d) !important;
}
/* _content/InuniSphere.Web/Components/Pages/Iam/Iam.razor.rz.scp.css */
/* Design tokens for this page: a small, consistent spacing/radius scale rather than
   ad-hoc rem values scattered per rule, so the redesign reads as one system rather
   than a pile of individually-tuned components. */
.iam-page[b-w25k43w629] {
    --iam-space-1: 0.5rem;
    --iam-space-2: 0.75rem;
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-radius-sm: 0.5rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

/* Breadcrumbs — the page-specific layer of a three-layer nav hierarchy: InuniNav's
   utility bar (org area), InuniNav's IAM/Admin/Konto links (app section), this (where
   in the current page). Deliberately plain-text, not another set of pill buttons —
   it's orientation, not a place to click around. */
.iam-breadcrumbs[b-w25k43w629] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-w25k43w629],
.iam-breadcrumbs__link[b-w25k43w629] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-w25k43w629],
.iam-breadcrumbs__link:hover[b-w25k43w629] {
    text-decoration: underline;
}

/* The "IAM" crumb is a real control (jumps to the overview), so it's a <button>, not
   an <a> — reset it back to reading as plain breadcrumb text rather than a button. */
.iam-breadcrumbs__link[b-w25k43w629] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.iam-breadcrumbs__sep[b-w25k43w629] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-w25k43w629] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

/* Header: one title, one subtitle, contextual chips — replacing the old redundant
   "Zarządzanie dostępem" + "Zarządzanie tenantami" double-heading. */
.iam-header[b-w25k43w629] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-w25k43w629] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-w25k43w629] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-header__context[b-w25k43w629] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Horizontal tabs, replacing the earlier full-height colored sidebar. With at most
   two sections visible to any one person, a heavy vertical rail was disproportionate
   to the content it navigated — real tab-switching (only the active section's markup
   renders) rather than anchor-scroll links, matching how GitHub/Entra/Linear treat a
   module this size. */
.iam-tabs[b-w25k43w629] {
    display: flex;
    gap: var(--iam-space-1);
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
    margin-bottom: var(--iam-space-4);
}

.iam-tabs__item[b-w25k43w629] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 0.25rem;
    margin-right: var(--iam-space-4);
    font-weight: 600;
    color: var(--brand-text-muted, #5d7a7a);
    cursor: pointer;
}

.iam-tabs__item:hover[b-w25k43w629] {
    color: var(--brand-text-main, #232323);
}

.iam-tabs__item.is-active[b-w25k43w629] {
    color: var(--brand-primary, #185354);
    border-bottom-color: var(--brand-primary, #185354);
}

/* Overview/"welcome" grid — landing content shown on arrival at /iam, listing every
   section this person can reach so they pick one instead of being dropped into
   whichever section happened to load first. */
.iam-section-grid[b-w25k43w629] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-section-card[b-w25k43w629] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iam-space-3);
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.iam-section-card:hover[b-w25k43w629] {
    border-color: var(--brand-primary, #185354);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.1);
}

.iam-section-card__body h2[b-w25k43w629] {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}

.iam-section-card__body p[b-w25k43w629] {
    margin: 0;
}

.iam-section-card__chevron[b-w25k43w629] {
    font-size: 1.25rem;
    color: var(--brand-primary, #185354);
    flex-shrink: 0;
}

/* Cards — the one container type every section uses, so tenants, permissions, and
   staff sections all read as the same kind of surface. */
.iam-card[b-w25k43w629] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-w25k43w629] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

/* A card-styled block inside another .iam-card (column picker, bulk-action bar) — same
   bordered look, without stacking a second shadow/margin on top of the parent card's own. */
.iam-card--nested[b-w25k43w629] {
    box-shadow: none;
    margin-bottom: 0;
    background: var(--brand-accent-soft, #f4fafa);
}

.iam-card__header[b-w25k43w629] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

/* The primary action, moved here from below the table — top-right of the section
   it acts on, next to a search field, where a creation action is expected. */
.iam-card__actions[b-w25k43w629] {
    display: flex;
    align-items: center;
    gap: var(--iam-space-2);
    flex-wrap: wrap;
}

.iam-search[b-w25k43w629] {
    width: 16rem;
    max-width: 100%;
}

.iam-create-tenant-form[b-w25k43w629] {
    padding: var(--iam-space-4);
    margin: 0 0 var(--iam-space-4);
    background: var(--brand-accent-soft, #f4fafa);
    border-radius: var(--iam-radius-sm);
}

/* Grid instead of Bootstrap's row/col-auto flex-wrap — every field keeps the same
   label-above-control shape and lines up on its own grid row regardless of how many
   fields fit per line, instead of a manual margin-top hack (the checkbox field) that
   only lined up while nothing wrapped. */
.iam-form-grid[b-w25k43w629] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--iam-space-3);
}

.iam-form-field[b-w25k43w629] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.iam-form-field .form-label[b-w25k43w629] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text-main, #232323);
}

.iam-form-field .form-check[b-w25k43w629] {
    margin-top: 0.3rem;
}

.iam-form-actions[b-w25k43w629] {
    display: flex;
    align-items: center;
    gap: var(--iam-space-3);
    flex-wrap: wrap;
    margin-top: var(--iam-space-4);
}

/* Informational banners for special, non-actionable entries (e.g. the pre-tenant-model
   sentinel row) or error states — visually distinct from a normal card so it reads as
   "read this" rather than "here's more data". */
.iam-banner[b-w25k43w629] {
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-w25k43w629] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner p[b-w25k43w629] {
    margin: 0;
}

.iam-banner--info[b-w25k43w629] {
    background: #eef6f6;
    border: 1px solid var(--brand-border, #d8e8e8);
    color: #123f40;
}

.iam-banner--error[b-w25k43w629] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

.iam-banner--success[b-w25k43w629] {
    background: #eef9f0;
    border: 1px solid #bfe6c8;
    color: #1e5c33;
}

/* Tenant detail modal's Admin-only actions (link an existing Entra account, assign a
   SystemRole directly) — each gets its own labeled, collapsible block instead of an
   unlabeled toggle button, so it's clear which section's content is currently open. */
.iam-admin-action__divider[b-w25k43w629] {
    border: none;
    border-top: 1px solid var(--brand-border, #d8e8e8);
    margin: var(--iam-space-4) 0;
}

.iam-admin-action__header[b-w25k43w629] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-3);
}

.iam-admin-action__header h3[b-w25k43w629] {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

/* The person currently picked out of a search-results table, before the final confirming
   action (Podłącz/Przypisz) — a distinct highlighted row so it reads as "this is who the
   button below will act on", not just another line of text. */
.iam-selected-person[b-w25k43w629] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iam-space-3);
    background: var(--brand-accent-soft, #f4fafa);
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-2) var(--iam-space-3);
    margin-bottom: var(--iam-space-3);
}

/* Tenant/role tiles, replacing the old plain <table> — a manageable set of cards
   rather than a dense grid, per the expected scale of "partner orgs", with generous
   spacing and a hover state so each one reads as its own, clickable-feeling unit. */
.iam-tile-grid[b-w25k43w629] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--iam-space-3);
}

.iam-tile[b-w25k43w629] {
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius-sm);
    padding: var(--iam-space-3);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.iam-tile:hover[b-w25k43w629] {
    box-shadow: var(--iam-shadow);
    border-color: var(--brand-primary, #185354);
}

.iam-tile__top[b-w25k43w629] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iam-space-2);
    margin-bottom: 0.35rem;
}

.iam-tile__name[b-w25k43w629] {
    font-weight: 700;
}

.iam-detail-list[b-w25k43w629] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--iam-space-3);
    row-gap: 0.35rem;
    margin-bottom: var(--iam-space-3);
}

.iam-detail-list dt[b-w25k43w629] {
    color: var(--brand-muted, #5f7a7a);
    font-weight: 600;
}

.iam-detail-list dd[b-w25k43w629] {
    margin: 0;
}

/* Status badges — color-coded, human-readable labels instead of identitycore's raw
   internal TenantStatus strings (PermissionReady/PermissionNotGranted/Disconnected). */
.iam-badge[b-w25k43w629] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.iam-badge--success[b-w25k43w629] {
    background: #e3f5e9;
    color: #1a7a3e;
}

.iam-badge--warning[b-w25k43w629] {
    background: #fdf3d8;
    color: #8a6300;
}

.iam-badge--danger[b-w25k43w629] {
    background: #fde3e3;
    color: #a12626;
}

.iam-badge--neutral[b-w25k43w629] {
    background: #f2f4f5;
    color: var(--brand-text-muted, #5d7a7a);
}

/* Inline "remove this role" control inside a badge — "Zarządzaj rolami na evencie"'s
   per-person role tags. */
.iam-badge__remove[b-w25k43w629] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.35rem;
    line-height: 1;
    font-size: 0.9rem;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
}

.iam-badge__remove:hover[b-w25k43w629] {
    opacity: 1;
    color: #a12626;
}

/* Small round "+" trigger that opens the request modal — sits in a tile's header row
   next to its title, instead of an always-visible inline form. */
.iam-icon-button[b-w25k43w629] {
    appearance: none;
    border: 1px solid var(--brand-border, #d8e8e8);
    background: #fff;
    color: var(--brand-primary, #185354);
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.iam-icon-button:hover[b-w25k43w629] {
    background: var(--brand-accent-soft, #f4fafa);
    border-color: var(--brand-primary, #185354);
}

/* Row spacing/hover for the one table that's left (role requests — a genuine log of
   past events, not something that benefits from card treatment). */
.iam-table td[b-w25k43w629],
.iam-table th[b-w25k43w629] {
    padding: var(--iam-space-2) var(--iam-space-3);
}

.iam-table tbody tr:hover[b-w25k43w629] {
    background: var(--brand-accent-soft, #f4fafa);
}

.iam-dashboard__stats[b-w25k43w629] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--iam-space-3);
}

.iam-dashboard__stat[b-w25k43w629] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius-sm);
    background: var(--brand-accent-soft, #f4fafa);
}

.iam-dashboard__stat-value[b-w25k43w629] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.iam-dashboard__stat-label[b-w25k43w629] {
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

@media (max-width: 640px) {
    .iam-header[b-w25k43w629] {
        flex-direction: column;
    }

    .iam-card__header[b-w25k43w629] {
        flex-direction: column;
        align-items: stretch;
    }

    .iam-search[b-w25k43w629] {
        width: 100%;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Room/RoomSelection.razor.rz.scp.css */
/* Same visual language as ProfileWizard.razor.css's own design-tokens comment - kept as a
   separate copy since Blazor CSS isolation scopes rules to the component that declares them. */
.iam-page[b-3nm6ffd10f] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-3nm6ffd10f] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-3nm6ffd10f] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-3nm6ffd10f] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-3nm6ffd10f] {
    margin: 0 0.4rem;
}

.iam-header[b-3nm6ffd10f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-3nm6ffd10f] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-3nm6ffd10f] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-3nm6ffd10f] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-3nm6ffd10f] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-3nm6ffd10f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-banner[b-3nm6ffd10f] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-3nm6ffd10f] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-3nm6ffd10f] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
}

.iam-banner--info[b-3nm6ffd10f] {
    background: #eff8ff;
    border: 1px solid #bfe0f5;
    color: #0f3a5a;
}

.room-selection--themed[b-3nm6ffd10f] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.room-selection--themed .iam-header__subtitle[b-3nm6ffd10f] {
    color: var(--brand-text-muted, #5d7a7a);
}

.room-selection--themed .iam-card[b-3nm6ffd10f] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

/* Bootstrap's .text-muted is a fixed grey tuned for a light card - on Boost's dark
   --brand-surface card that grey is nearly invisible, so it needs to follow the theme's own
   muted color instead (same fix as ProfileWizard.razor.css/Documents.razor.css). */
.room-selection--themed .text-muted[b-3nm6ffd10f] {
    color: var(--brand-text-muted, #6c757d) !important;
}

/* Map on the left, room details (capacity/opiekun/roster) on the right - stacks on narrow
   viewports since a side-by-side layout doesn't fit a floor-plan image at any useful size. */
.room-selection__layout[b-3nm6ffd10f] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: var(--iam-space-4);
    align-items: start;
}

@media (max-width: 768px) {
    .room-selection__layout[b-3nm6ffd10f] {
        grid-template-columns: 1fr;
    }
}

.room-selection__details[b-3nm6ffd10f] {
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    padding: var(--iam-space-3) var(--iam-space-4);
}

.room-selection__member-list[b-3nm6ffd10f] {
    margin: 0;
    padding-left: 1.2rem;
}

.room-selection__member-list li[b-3nm6ffd10f] {
    font-size: 0.9rem;
}
/* _content/InuniSphere.Web/Components/Pages/Surveys/SurveyList.razor.rz.scp.css */
/* Same visual language as /admin and ActivitySelection.razor's own copy of it - kept as a
   separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules to the
   component that declares them. */
.iam-page[b-3blxqv2uhu] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-3blxqv2uhu] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-3blxqv2uhu] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-3blxqv2uhu] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-3blxqv2uhu] {
    margin: 0 0.4rem;
}

.iam-header[b-3blxqv2uhu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-3blxqv2uhu] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-3blxqv2uhu] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-3blxqv2uhu] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner[b-3blxqv2uhu] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner--error[b-3blxqv2uhu] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
}

.surveys-page--themed[b-3blxqv2uhu] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.surveys-page--themed .iam-header__subtitle[b-3blxqv2uhu] {
    color: var(--brand-text-muted, #5d7a7a);
}

.surveys-page--themed .iam-card[b-3blxqv2uhu] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

.surveys-page--themed .text-muted[b-3blxqv2uhu] {
    color: var(--brand-text-muted, #6c757d) !important;
}

.survey-card--completed[b-3blxqv2uhu] {
    border-color: var(--brand-accent, #185354);
    background: var(--brand-accent-soft, #eef6f6);
}

@media (max-width: 640px) {
    .iam-header[b-3blxqv2uhu] {
        flex-direction: column;
    }
}
/* _content/InuniSphere.Web/Components/Pages/Transport/TransportWizard.razor.rz.scp.css */
/* Same visual language as /admin (see Admin.razor.css's own design-tokens comment) - kept as
   a separate copy rather than a shared stylesheet because Blazor CSS isolation scopes rules
   to the component that declares them; a class used in TransportWizard.razor picks up nothing
   from Admin.razor.css. */
.iam-page[b-byojahfz8x] {
    --iam-space-3: 1rem;
    --iam-space-4: 1.5rem;
    --iam-space-5: 2rem;
    --iam-radius: 0.75rem;
    --iam-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--iam-space-4) var(--iam-space-5);
}

.iam-breadcrumbs[b-byojahfz8x] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-breadcrumbs a[b-byojahfz8x] {
    color: inherit;
    text-decoration: none;
}

.iam-breadcrumbs a:hover[b-byojahfz8x] {
    text-decoration: underline;
}

.iam-breadcrumbs__sep[b-byojahfz8x] {
    margin: 0 0.4rem;
}

.iam-breadcrumbs [aria-current="page"][b-byojahfz8x] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.iam-header[b-byojahfz8x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    padding-top: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-header h1[b-byojahfz8x] {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.iam-header__subtitle[b-byojahfz8x] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.iam-card[b-byojahfz8x] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--iam-radius);
    box-shadow: var(--iam-shadow);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-card h2[b-byojahfz8x] {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.iam-card__header[b-byojahfz8x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
    margin-bottom: var(--iam-space-4);
}

.iam-card__actions[b-byojahfz8x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iam-banner[b-byojahfz8x] {
    border-radius: 0.5rem;
    padding: var(--iam-space-3) var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
}

.iam-banner strong[b-byojahfz8x] {
    display: block;
    margin-bottom: 0.25rem;
}

.iam-banner--error[b-byojahfz8x] {
    background: #fff2f2;
    border: 1px solid #f3c9c9;
    color: #6d1e1e;
    max-width: 72rem;
    margin: var(--iam-space-4) auto;
}

.iam-banner--success[b-byojahfz8x] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

.transport-wizard--themed .iam-banner--success[b-byojahfz8x] {
    background: color-mix(in srgb, #10b981 18%, var(--brand-surface, #fff));
    border-color: #10b981;
    color: var(--brand-text-main, inherit);
}

@media (max-width: 640px) {
    .iam-header[b-byojahfz8x] {
        flex-direction: column;
    }

    .iam-card__header[b-byojahfz8x] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Same theming approach as ProfileWizard.razor.css's own .profile-wizard--themed - .iam-card/
   .iam-breadcrumbs/.iam-header above already reference --brand-* custom properties with
   light-theme fallbacks, so ThemedHead alone re-colors accents/borders automatically once this
   class is present; only the page/card backgrounds and body text need an explicit override. */
.transport-wizard--themed[b-byojahfz8x] {
    background: var(--brand-page-bg, transparent);
    color: var(--brand-text-main, inherit);
}

.transport-wizard--themed .iam-header__subtitle[b-byojahfz8x] {
    color: var(--brand-text-muted, #5d7a7a);
}

.transport-wizard--themed .iam-card[b-byojahfz8x] {
    background: var(--brand-surface, #fff);
    border-color: var(--brand-border, #d8e8e8);
}

/* Bootstrap's default .form-control is a light control (white background, dark text) - wrong
   on BOOST's dark surface. Same treatment ProfileWizard.razor.css/Welcome.razor's own
   .welcome-form already use. */
.transport-wizard--themed .form-control[b-byojahfz8x] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-border, #cbd5e1);
    color: var(--brand-text-main, inherit);
}

.transport-wizard--themed .form-control[b-byojahfz8x]::placeholder {
    color: var(--brand-text-muted);
    opacity: 0.7;
}

.transport-wizard--themed .form-control:focus[b-byojahfz8x] {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-accent, #2563eb);
    color: var(--brand-text-main, inherit);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

/* Bootstrap's .text-muted is a fixed grey tuned for a light card - on Boost's dark
   --brand-surface card that grey is nearly invisible, so it needs to follow the theme's own
   muted color instead. */
.transport-wizard--themed .text-muted[b-byojahfz8x] {
    color: var(--brand-text-muted, #6c757d) !important;
}

.transport-method-grid[b-byojahfz8x] {
    display: grid;
    /* auto-fit (not auto-fill) - with only 3 cards, auto-fill reserves as many empty columns as
       the row has room for, squeezing the real cards to the left; auto-fit collapses those empty
       tracks so the existing cards stretch to fill the row instead. */
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.transport-method-card[b-byojahfz8x] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    background: var(--brand-surface, #fff);
    border: 2px solid var(--brand-border, #d8e8e8);
    border-radius: var(--brand-radius, 0.6rem);
    padding: 1rem;
    cursor: pointer;
    /* Browsers give <button> its own default text color (not inherited from the page like a
       plain <div> would), so without this its <strong> title stays dark/invisible against
       BOOST's dark card even though everything around it already follows the theme. */
    color: var(--brand-text-main, inherit);
}

.transport-method-card:not(:disabled):hover[b-byojahfz8x],
.transport-method-card:not(.transport-method-card--disabled):hover[b-byojahfz8x] {
    border-color: var(--brand-accent, #185354);
}

.transport-method-card--recommended[b-byojahfz8x] {
    border-color: var(--brand-accent, #185354);
}

.transport-method-card--disabled[b-byojahfz8x] {
    opacity: 0.6;
    cursor: not-allowed;
}

.transport-method-card__icon[b-byojahfz8x] {
    font-size: 1.5rem;
}

.transport-method-card__badge[b-byojahfz8x] {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-accent, #185354);
    background: var(--brand-accent-soft, #eef6f6);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.transport-station-option[b-byojahfz8x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--brand-radius, 0.6rem);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
}

.transport-station-option.is-selected[b-byojahfz8x] {
    border-color: var(--brand-accent, #185354);
    background: var(--brand-accent-soft, #eef6f6);
}

.transport-timeline[b-byojahfz8x] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.transport-timeline__step[b-byojahfz8x] {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    border-left: 2px solid var(--brand-border, #d8e8e8);
    padding: 0.1rem 0 0.1rem 1rem;
}

.transport-timeline__step-time[b-byojahfz8x] {
    flex-shrink: 0;
    min-width: 3.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-accent, #185354);
}

.transport-timeline__step-label[b-byojahfz8x] {
    color: var(--brand-text-main, inherit);
}

.transport-timeline__staff[b-byojahfz8x] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-border, #d8e8e8);
}

.transport-timeline__step--staff[b-byojahfz8x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.transport-staff-photo[b-byojahfz8x] {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==================== Travel-pass redesign ====================
   A single-column stack, boarding-pass-first - see TransportWizard.razor's own
   RenderTravelExperience. Every "iam-card" sibling here reuses that shared card treatment
   (already theme-aware via .transport-wizard--themed above) so only the pass itself needs its
   own distinct, more prominent visual language. */
.transport-pass-page[b-byojahfz8x] {
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-4);
}

.transport-pass[b-byojahfz8x] {
    position: relative;
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand-accent, #185354) 22%, var(--brand-surface, #fff)) 0%, var(--brand-surface, #fff) 55%);
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: calc(var(--brand-radius, 0.6rem) * 1.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: var(--iam-space-4) var(--iam-space-4) 0;
    color: var(--brand-text-main, inherit);
    overflow: hidden;
}

.transport-pass[b-byojahfz8x]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.35rem;
    background: var(--brand-accent, #185354);
}

.transport-pass--pending[b-byojahfz8x]::before { background: #d9a521; }
.transport-pass--transit[b-byojahfz8x]::before { background: #3b82f6; }
.transport-pass--arrived[b-byojahfz8x]::before { background: #10b981; }
.transport-pass--modified[b-byojahfz8x]::before { background: #f97316; }
.transport-pass--confirmed[b-byojahfz8x]::before { background: var(--brand-accent, #10b981); }

/* Status/countdown live here now, right next to the eyebrow - the spec's own priority order
   ("in 3 seconds") puts confirmation-of-status ahead of the train number, which moved down to
   .transport-pass__train-chip below the big station/time row instead of being the page's
   biggest heading. */
.transport-pass__eyebrow-row[b-byojahfz8x] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
    margin-bottom: 0.85rem;
}

.transport-pass__eyebrow[b-byojahfz8x] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand-text-muted, #5d7a7a);
}

.transport-pass__status[b-byojahfz8x] {
    font-size: 0.85rem;
    font-weight: 700;
}

.transport-pass__countdown[b-byojahfz8x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-accent, #185354);
}

/* The core "when do I leave / when do I arrive" answer - deliberately the single largest text
   on the page (spec: "these should be larger than all other transport information"). */
.transport-pass__journey[b-byojahfz8x] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.transport-pass__stop[b-byojahfz8x] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.transport-pass__stop--end[b-byojahfz8x] {
    align-items: flex-end;
    text-align: right;
}

.transport-pass__stop-label[b-byojahfz8x] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-accent, #185354);
}

.transport-pass__stop-name[b-byojahfz8x] {
    font-size: 0.95rem;
    color: var(--brand-text-muted, #5d7a7a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transport-pass__stop-time[b-byojahfz8x] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.transport-pass__arrow[b-byojahfz8x] {
    font-size: 1.5rem;
    color: var(--brand-accent, #185354);
}

/* Train number/duration are secondary, supporting facts now - a plain pill row underneath the
   big station/time headline rather than the page's main heading (spec: "numer pociągu powinien
   być informacją pomocniczą, a nie głównym nagłówkiem"). */
.transport-pass__meta-row[b-byojahfz8x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.transport-pass__train-chip[b-byojahfz8x],
.transport-pass__chip[b-byojahfz8x] {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-accent-soft, #eef6f6);
    color: var(--brand-accent, #185354);
}

/* A transfer needs the full hand-off spelled out (arrival platform → departure platform, both
   trains' own times) right in the hero, not a vague "you have a connection" note - spec:
   "Połączenia przesiadkowe muszą mieć timeline" / legible platform-to-platform detail. */
.transport-pass__transfer-note[b-byojahfz8x] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: var(--brand-radius, 0.6rem);
    background: color-mix(in srgb, var(--brand-surface, #fff) 92%, black);
}

.transport-pass__transfer-note-icon[b-byojahfz8x] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.transport-pass__transfer-note-detail[b-byojahfz8x] {
    font-size: 0.9rem;
    color: var(--brand-text-muted, #5d7a7a);
    font-variant-numeric: tabular-nums;
}

/* The perforated "boarding pass stub" - a dashed tear-line divider, same visual grammar as a
   real paper ticket / Apple Wallet card. */
.transport-pass__stub[b-byojahfz8x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -1.25rem;
    padding: 1rem 1.25rem;
    border-top: 2px dashed var(--brand-border, #d8e8e8);
    background: color-mix(in srgb, var(--brand-surface, #fff) 92%, black);
}

.transport-pass__stub-info[b-byojahfz8x] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.transport-pass__stub-name[b-byojahfz8x] {
    font-weight: 700;
}

.transport-pass__stub-label[b-byojahfz8x] {
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

/* Deliberately its own distinct, high-contrast card (spec: "ta informacja musi być bardziej
   widoczna niż komunikaty organizacyjne") - a solid accent fill rather than the soft-tint
   treatment every other card on this page uses, so it reads as more urgent than the alerts
   section below it, not just another equally-weighted box. */
.transport-gathering[b-byojahfz8x] {
    background: var(--brand-accent, #185354);
    color: #fff;
    border-radius: var(--iam-radius);
    padding: var(--iam-space-4);
    margin-bottom: var(--iam-space-4);
    box-shadow: var(--iam-shadow);
}

.transport-gathering__badge[b-byojahfz8x] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    opacity: 0.9;
}

.transport-gathering__time[b-byojahfz8x] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

.transport-gathering__place[b-byojahfz8x] {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.transport-gathering__platform[b-byojahfz8x] {
    font-weight: 700;
}

.transport-gathering__note[b-byojahfz8x] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Big, unambiguous ODJAZD/PRZYJAZD tiles - same visual grammar as an airline boarding pass's
   GATE/SEAT boxes (spec: "perony powinny być bardzo duże i jednoznaczne", "make wagon and peron
   more visible"), and each tile is explicitly labeled so it's never ambiguous which leg a peron
   number belongs to. */
.transport-platforms[b-byojahfz8x] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: var(--iam-space-4);
}

.transport-platforms__tile[b-byojahfz8x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1.1rem;
    border: 2px solid var(--brand-accent, #185354);
    border-radius: var(--iam-radius);
    background: var(--brand-surface, #fff);
}

.transport-platforms__tile--arrival[b-byojahfz8x] {
    border-color: var(--brand-border, #d8e8e8);
}

.transport-platforms__label[b-byojahfz8x] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-text-muted, #5d7a7a);
}

.transport-platforms__value[b-byojahfz8x] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--brand-accent, #185354);
}

.transport-platforms__tile--arrival .transport-platforms__value[b-byojahfz8x] {
    color: var(--brand-text-main, inherit);
}

.transport-platforms__sub[b-byojahfz8x] {
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.transport-todo__list[b-byojahfz8x] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.transport-alerts[b-byojahfz8x] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.transport-alert[b-byojahfz8x] {
    border-radius: var(--brand-radius, 0.6rem);
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
}

.transport-alert strong[b-byojahfz8x] {
    display: block;
    margin-bottom: 0.2rem;
}

.transport-alert--info[b-byojahfz8x] {
    background: var(--brand-accent-soft, #eef6f6);
    border-color: var(--brand-border, #d8e8e8);
    color: var(--brand-text-main, inherit);
}

.transport-alert--warning[b-byojahfz8x] {
    background: color-mix(in srgb, #d9a521 18%, var(--brand-surface, #fff));
    border-color: #d9a521;
    color: var(--brand-text-main, inherit);
}

.transport-alert--urgent[b-byojahfz8x] {
    background: color-mix(in srgb, #dc2626 18%, var(--brand-surface, #fff));
    border-color: #dc2626;
    color: var(--brand-text-main, inherit);
}

.transport-alert--urgent a[b-byojahfz8x] {
    font-size: 1.3rem;
    font-weight: 800;
    color: inherit;
}

/* The 6 facts the spec calls out for a phone's first screen (departure station/time/platform,
   gathering time, arrival station/time) all live in the hero + gathering + platforms sections in
   that exact order - this query only tightens their own spacing/type-scale so all three fit
   without scrolling; everything below (todo/alerts/timeline/destination) is unaffected. */
@media (max-width: 640px) {
    .transport-pass[b-byojahfz8x] {
        padding: var(--iam-space-3) var(--iam-space-3) 0;
    }

    .transport-pass__stop-time[b-byojahfz8x] {
        font-size: 1.8rem;
    }

    .transport-pass__stub[b-byojahfz8x] {
        flex-direction: column;
        align-items: flex-start;
    }

    .transport-gathering[b-byojahfz8x] {
        padding: 0.85rem 1rem;
        margin-bottom: 0.85rem;
    }

    .transport-gathering__time[b-byojahfz8x] {
        font-size: 2rem;
    }

    .transport-platforms[b-byojahfz8x] {
        margin-bottom: 0.85rem;
    }

    .transport-platforms__tile[b-byojahfz8x] {
        padding: 0.6rem 0.85rem;
    }

    .transport-platforms__value[b-byojahfz8x] {
        font-size: 1.25rem;
    }
}
/* _content/InuniSphere.Web/Components/Shared/BoostNav.razor.rz.scp.css */
/* Values below are ported directly from boost.inuni.org.pl's own compiled stylesheet
   (its BOOST-scoped .site-header override, fetched and read directly - see BoostNav.razor's
   own doc comment) — not approximated from a screenshot. */

.boost-nav[b-ngttl4zp7s] {
    position: relative;
    font-family: var(--brand-font-family, inherit);
    background: var(--brand-page-bg, #0e0e17);
    border-bottom: 2px solid var(--brand-accent, #cf6bff);
}

.boost-nav__grid[b-ngttl4zp7s] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1rem 1.5rem 0.5rem;
}

/* The public-marketing header's right column stacks TWO rows (utility bar + links), so its
   slightly taller bottom padding balances that extra row visually. IsAppContext drops the
   utility bar, leaving only one (shorter) row - the same asymmetric padding then reads as the
   logo sitting above center instead of vertically centered, so this evens it out for that case. */
.boost-nav--app .boost-nav__grid[b-ngttl4zp7s] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.boost-nav__brand[b-ngttl4zp7s] {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

.boost-nav__brand img[b-ngttl4zp7s] {
    height: 3.1rem;
    width: auto;
    display: block;
}

/* The real site's .right-column is a COLUMN-direction flex box - it stacks two right-aligned
   rows (utility links above, main links + sign-in/user below) in the same grid cell next to a
   single vertically-centered logo, rather than one unified row. */
.boost-nav__right[b-ngttl4zp7s] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    width: 100%;
    margin-right: 0.45rem;
}

.boost-nav__utility[b-ngttl4zp7s] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
    min-height: 1.4rem;
}

.boost-nav__utility a[b-ngttl4zp7s] {
    color: var(--brand-text-main, #fff);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.25rem 0.55rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.boost-nav__utility a:hover[b-ngttl4zp7s] {
    background-color: var(--brand-accent-soft, #2c214b);
}

.boost-nav__main[b-ngttl4zp7s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}

.boost-nav__links[b-ngttl4zp7s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.boost-nav__links a[b-ngttl4zp7s] {
    color: var(--brand-text-main, #fff);
    text-decoration: none;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.boost-nav__links a:hover[b-ngttl4zp7s] {
    background: var(--brand-accent-soft, #2c214b);
    border-color: color-mix(in srgb, var(--brand-accent, #cf6bff) 35%, transparent);
}

.boost-nav__discord-btn[b-ngttl4zp7s] {
    color: var(--brand-text-main, #fff);
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.boost-nav__discord-btn:hover[b-ngttl4zp7s] {
    background: var(--brand-accent-soft, #2c214b);
    border-color: color-mix(in srgb, var(--brand-accent, #cf6bff) 35%, transparent);
}

.boost-nav__discord-btn:disabled[b-ngttl4zp7s] {
    opacity: 0.6;
    cursor: default;
}

.boost-nav__signin[b-ngttl4zp7s] {
    background: var(--brand-accent-strong, #b84df2);
    color: var(--brand-text-main, #fff);
    border: 1px solid transparent;
    border-radius: 0.6rem;
    padding: 0.5rem 1.15rem;
    min-width: 9rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.boost-nav__signin:hover[b-ngttl4zp7s] {
    background: var(--brand-accent, #cf6bff);
    border-color: rgba(255, 255, 255, 0.25);
}

.boost-nav__user[b-ngttl4zp7s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.65rem 0.2rem 0.2rem;
    border: 1px solid color-mix(in srgb, var(--brand-accent, #cf6bff) 40%, transparent);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--brand-accent-soft, #2c214b) 75%, transparent);
    max-width: min(36vw, 26rem);
}

.boost-nav__avatar[b-ngttl4zp7s] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-accent-strong, #b84df2);
    color: var(--brand-text-main, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.boost-nav__user-name[b-ngttl4zp7s] {
    font-size: 0.82rem;
    color: var(--brand-text-main, #fff);
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boost-nav__signout-form[b-ngttl4zp7s] {
    display: contents;
}

.boost-nav__signout[b-ngttl4zp7s] {
    font-size: 0.75rem;
    color: var(--brand-text-muted, #c5bddb);
    background: none;
    border: none;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
}

.boost-nav__signout:hover[b-ngttl4zp7s] {
    color: var(--brand-text-main, #fff);
    background: color-mix(in srgb, var(--brand-accent, #cf6bff) 25%, transparent);
}

.boost-nav__toggle[b-ngttl4zp7s] {
    display: none;
}

.boost-nav__toggle-label[b-ngttl4zp7s] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    cursor: pointer;
}

.boost-nav__toggle-label span[b-ngttl4zp7s] {
    display: block;
    height: 2px;
    background: var(--brand-text-main, #fff);
    border-radius: 1px;
}

/* Closes the menu on an outside click without any JS - a second <label> for the same
   checkbox (see BoostNav.razor), invisible and covering the whole viewport, that only exists
   in the DOM's rendered layout while the menu is open. Sits at a lower z-index than the menu
   content itself (.boost-nav__grid, below) so it only catches clicks that land outside the
   actual menu - clicking any real menu item still reaches that item first. */
.boost-nav__scrim[b-ngttl4zp7s] {
    display: none;
}

@media (max-width: 991.98px) {
    /* Absolutely positioned (out of the grid's own flow) so it can sit on the right edge of
       the same row as the logo instead of the full-width row above it this used to render as -
       .boost-nav has position:relative for this to anchor against. */
    .boost-nav__toggle-label[b-ngttl4zp7s] {
        display: flex;
        position: absolute;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        /* Must outrank .boost-nav__grid's own z-index: 2 below - equal values are tie-broken by
           DOM order, and .boost-nav__grid comes later in markup, so at z-index:2 its (invisible
           but still present) box silently intercepted every tap meant for this label, even
           though the label was still visibly painted underneath it. This is the actual reason
           the mobile menu button did nothing - unrelated to any browser's :has() support. */
        z-index: 3;
    }

    .boost-nav__grid[b-ngttl4zp7s] {
        position: relative;
        z-index: 2;
    }

    /* Collapsed by default - a floating dropdown card anchored under the hamburger, matching
       the real boost.inuni.org.pl site's own mobile menu, rather than pushing the page's actual
       content down by rendering inline in the grid's normal flow (which is what this looked
       like before - technically "open" but visually just a flat stack of links, not a menu). */
    .boost-nav__main[b-ngttl4zp7s] {
        display: none;
        position: absolute;
        top: 100%;
        right: 1.5rem;
        margin-top: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.35rem;
        width: min(18rem, calc(100vw - 3rem));
        padding: 1rem;
        border-radius: 1rem;
        background: var(--brand-accent-soft, #2c214b);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    }

    .boost-nav__links[b-ngttl4zp7s] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .boost-nav__user[b-ngttl4zp7s],
    .boost-nav__signin[b-ngttl4zp7s] {
        margin-top: 0.35rem;
    }

    .boost-nav:has(.boost-nav__toggle:checked) .boost-nav__main[b-ngttl4zp7s],
    /* :has() fallback - see InuniNav.razor.css's own comment on this same pattern. */
    .boost-nav--open .boost-nav__main[b-ngttl4zp7s] {
        display: flex;
    }

    .boost-nav:has(.boost-nav__toggle:checked) .boost-nav__scrim[b-ngttl4zp7s],
    .boost-nav--open .boost-nav__scrim[b-ngttl4zp7s] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        cursor: default;
    }
}
/* _content/InuniSphere.Web/Components/Shared/HelpButton.razor.rz.scp.css */
.help-button[b-fns1i8g9bs] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-text-main, #232323);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.help-button:hover[b-fns1i8g9bs] {
    background: var(--brand-accent-soft, #f4fafa);
    border-color: var(--brand-primary, #185354);
    color: var(--brand-primary, #185354);
}

.help-button__icon[b-fns1i8g9bs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--brand-accent-soft, #f4fafa);
    color: var(--brand-primary, #185354);
    font-size: 0.72rem;
    font-weight: 700;
}

.help-button:hover .help-button__icon[b-fns1i8g9bs] {
    background: #fff;
}
/* _content/InuniSphere.Web/Components/Shared/InuniNav.razor.rz.scp.css */
/* Values ported from inuni.org.pl's own compiled stylesheet (its light/generic
   .site-header scope), same approach as BoostNav for the dark BOOST-scoped one. */

/* .inuni-nav is a single flex row; its direct children are the brand logo, the
   social icons, and .inuni-nav__right (which itself stacks the utility bar above the
   links+avatar row). align-items:center here is what actually centers the logo/social
   against the FULL navbar height — including both of .inuni-nav__right's own stacked
   rows — rather than against just one of them, which is what kept looking off-center
   when the utility bar and the links/avatar row were both direct children instead. */
.inuni-nav[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--brand-font-family, inherit);
    background: var(--brand-page-bg, #fff);
    box-shadow: 0 2px 15px #335353;
    flex-wrap: wrap;
}

.inuni-nav__brand[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-text-main, #232323);
    text-decoration: none;
    white-space: nowrap;
}

.inuni-nav__brand-mark[b-k7suloqjv8] {
    height: 2.2rem;
    width: auto;
    display: block;
}

.inuni-nav__brand-stack[b-k7suloqjv8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.inuni-nav__brand-label[b-k7suloqjv8] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-text-muted, #5d7a7a);
}

.inuni-nav__social[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--brand-text-main, #232323);
}

.inuni-nav__social a[b-k7suloqjv8] {
    color: inherit;
    display: flex;
}

.inuni-nav__social a:hover[b-k7suloqjv8] {
    color: var(--brand-primary, #185354);
}

/* The right-hand block: utility bar stacked above the links+avatar row, pushed to the
   header's right edge. Its own two rows can be whatever height they need to be —
   .inuni-nav's align-items:center (above) centers the logo/social against this
   block's total height, not the other way around. */
.inuni-nav__right[b-k7suloqjv8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    margin-left: auto;
}

.inuni-nav__utility[b-k7suloqjv8] {
    display: flex;
    gap: 0.55rem;
}

.inuni-nav__utility a[b-k7suloqjv8] {
    color: var(--brand-text-main, #3b3b3b);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.25rem 0.55rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 1rem;
}

.inuni-nav__utility a.is-active[b-k7suloqjv8],
.inuni-nav__utility a:hover[b-k7suloqjv8] {
    color: #185354;
    background-color: #a9d4d2;
}

.inuni-nav__bottom-row[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.inuni-nav__links[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.inuni-nav__links a[b-k7suloqjv8] {
    color: #232323;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
}

.inuni-nav__links a:hover[b-k7suloqjv8] {
    background: #f2f2f2;
}

.inuni-nav__nav-item[b-k7suloqjv8] {
    position: relative;
}

/* Hover-shown, not click-shown like the avatar menu's <details> — a plain <div>, not
   <details>/<summary>, since <details> only opens on click. Reuses
   .inuni-nav__dropdown/-item for the visual chrome; --left overrides the avatar
   dropdown's right-alignment since this one hangs under a left-side nav link. */
.inuni-nav__nav-item > .inuni-nav__dropdown[b-k7suloqjv8] {
    display: none;
    top: calc(100% + 0.3rem);
    left: 0;
    right: auto;
}

.inuni-nav__nav-item:hover > .inuni-nav__dropdown[b-k7suloqjv8],
.inuni-nav__nav-item:focus-within > .inuni-nav__dropdown[b-k7suloqjv8] {
    display: block;
}

.inuni-nav__signin[b-k7suloqjv8] {
    background: var(--brand-primary, #185354);
    color: var(--brand-primary-contrast, #fff);
    border-radius: 0.6rem;
    padding: 0.5rem 1.15rem;
    min-width: 9rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.inuni-nav__signin:hover[b-k7suloqjv8] {
    background: var(--brand-accent-strong, #123f40);
}

.inuni-nav__user[b-k7suloqjv8] {
    position: relative;
}

.inuni-nav__user[open][b-k7suloqjv8] {
    z-index: 1200;
}

.inuni-nav__user-trigger[b-k7suloqjv8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.65rem 0.2rem 0.2rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 2rem;
    background: var(--brand-accent-soft, #f4fafa);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.inuni-nav__user-trigger[b-k7suloqjv8]::-webkit-details-marker {
    display: none;
}

.inuni-nav__user-trigger:hover[b-k7suloqjv8] {
    background: #ebf4f4;
    border-color: #c5dddd;
}

.inuni-nav__avatar[b-k7suloqjv8] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-primary, #185354);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.inuni-nav__avatar--photo[b-k7suloqjv8] {
    object-fit: cover;
    background: none;
}

.inuni-nav__user-label[b-k7suloqjv8] {
    font-size: 0.82rem;
    color: var(--brand-text-main, #3b3b3b);
    max-width: 11rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inuni-nav__chevron[b-k7suloqjv8] {
    line-height: 1;
    flex-shrink: 0;
    color: var(--brand-text-muted, #5d7a7a);
    font-size: 0.75rem;
}

.inuni-nav__user[open] .inuni-nav__chevron[b-k7suloqjv8] {
    transform: rotate(180deg);
    display: inline-block;
}

.inuni-nav__dropdown[b-k7suloqjv8] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 12rem;
    padding: 0.45rem;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 36px rgba(19, 63, 64, 0.16);
}

.inuni-nav__dropdown-item[b-k7suloqjv8] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.72rem 0.9rem;
    border-radius: 0.75rem;
    color: #214646;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
}

.inuni-nav__dropdown-item:hover[b-k7suloqjv8] {
    background: #eef6f6;
    color: #123f40;
}

.inuni-nav__dropdown-item--danger[b-k7suloqjv8] {
    color: #8d2c2c;
}

.inuni-nav__dropdown-item--danger:hover[b-k7suloqjv8] {
    background: #fff2f2;
    color: #6d1e1e;
}

.inuni-nav__toggle[b-k7suloqjv8] {
    display: none;
}

.inuni-nav__toggle-label[b-k7suloqjv8] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    cursor: pointer;
    order: -1;
}

.inuni-nav__toggle-label span[b-k7suloqjv8] {
    display: block;
    height: 2px;
    background: var(--brand-text-main, #232323);
    border-radius: 1px;
}

@media (max-width: 991.98px) {
    .inuni-nav__toggle-label[b-k7suloqjv8] {
        display: flex;
    }

    .inuni-nav__links[b-k7suloqjv8],
    .inuni-nav__social[b-k7suloqjv8] {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .inuni-nav:has(.inuni-nav__toggle:checked) .inuni-nav__links[b-k7suloqjv8],
    .inuni-nav:has(.inuni-nav__toggle:checked) .inuni-nav__social[b-k7suloqjv8],
    /* :has() fallback - some mobile browsers (older WebViews/in-app browsers reached via the
       social icons above) don't support it, which left the toggle checkbox flipping state with
       no visible effect. nav-dropdown.js mirrors that state onto .inuni-nav--open via a plain
       change listener, so this rule fires the same way regardless of :has() support. */
    .inuni-nav--open .inuni-nav__links[b-k7suloqjv8],
    .inuni-nav--open .inuni-nav__social[b-k7suloqjv8] {
        display: flex;
    }
}
/* _content/InuniSphere.Web/Components/Shared/Modal.razor.rz.scp.css */
.inuni-modal-backdrop[b-qnj7jw4uyk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 23, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    padding: 1rem;
}

.inuni-modal[b-qnj7jw4uyk] {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 48px rgba(15, 23, 23, 0.25);
    max-width: 28rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.inuni-modal--wide[b-qnj7jw4uyk] {
    max-width: 44rem;
}

.inuni-modal--full-height[b-qnj7jw4uyk] {
    width: min(96vw, 90rem);
    max-width: min(96vw, 90rem);
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inuni-modal--full-height .inuni-modal__header[b-qnj7jw4uyk] {
    flex: 0 0 auto;
}

.inuni-modal--full-height .inuni-modal__body[b-qnj7jw4uyk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inuni-modal__header[b-qnj7jw4uyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--brand-border, #d8e8e8);
}

.inuni-modal__title[b-qnj7jw4uyk] {
    margin: 0;
    font-size: 1.1rem;
}

.inuni-modal__close[b-qnj7jw4uyk] {
    appearance: none;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: -0.5rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--brand-text-muted, #5d7a7a);
    flex-shrink: 0;
}

.inuni-modal__close:hover[b-qnj7jw4uyk] {
    color: #a12626;
}

.inuni-modal__body[b-qnj7jw4uyk] {
    padding: 1.5rem;
}
/* _content/InuniSphere.Web/Components/Shared/RoomMap.razor.rz.scp.css */
.room-map[b-enre3o7du8] {
    position: relative;
    width: 100%;
    max-width: 800px;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 0.5rem;
    background: #f4fafa;
}

.room-map__image[b-enre3o7du8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: crosshair;
    user-select: none;
}

.room-map__placeholder[b-enre3o7du8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--brand-text-muted, #5d7a7a);
}

.room-map__pin[b-enre3o7du8] {
    position: absolute;
    transform: translate(-50%, -50%);
    appearance: none;
    border: 2px solid #185354;
    background: #fff;
    color: #185354;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
}

.room-map__pin:hover:not(:disabled)[b-enre3o7du8] {
    background: #185354;
    color: #fff;
}

.room-map__pin--mine[b-enre3o7du8] {
    background: #1a7a3e;
    border-color: #1a7a3e;
    color: #fff;
}

.room-map__pin--disabled[b-enre3o7du8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.room-map__mask[b-enre3o7du8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Each mask is a full-container-sized image (mostly transparent outside its own highlighted
       pixels) - its hit-test area is the whole rectangle, not just the visibly-colored part.
       pointer-events:none keeps every click passing through to the base map / pins underneath,
       exactly like before hover support was attempted here; a hover tooltip on the highlight
       itself would need per-pixel alpha hit-testing CSS can't do, so that's carried by the pin's
       own always-visible label + title instead (see RoomMap.razor's HotspotTooltip). */
    pointer-events: none;
}

.room-map__pin--pending[b-enre3o7du8] {
    border-style: dashed;
    border-color: #b8720a;
    color: #b8720a;
    background: #fff8ec;
    pointer-events: none;
}
/* _content/InuniSphere.Web/Components/Shared/RoomMapEditor.razor.rz.scp.css */
.room-map-editor[b-lujdzd53cw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.75rem;
}

.room-map-editor__meta[b-lujdzd53cw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
}

.room-map-editor__toolbar[b-lujdzd53cw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.room-map-editor__toolbar-spacer[b-lujdzd53cw] {
    flex: 1 1 auto;
}

.room-map-editor__search input[b-lujdzd53cw] {
    max-width: 14rem;
}

.room-map-editor__zoom[b-lujdzd53cw] {
    display: flex;
    gap: 0.25rem;
}

.room-map-editor__body[b-lujdzd53cw] {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.room-map-editor__canvas-area[b-lujdzd53cw] {
    flex: 1 1 68%;
    min-width: 0;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 0.5rem;
    background: #eef5f5;
    overflow: hidden;
}

.room-map-editor__viewport[b-lujdzd53cw] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

/* Panning/dragging requires holding Cmd/Ctrl (see room-map.js's isPanModifier) - a plain
   click always reaches the base image/chip untouched, so the grab cursor only appears while
   that modifier is actually held, instead of implying every click can pan. */
.room-map-editor__viewport--pannable[b-lujdzd53cw] {
    cursor: grab;
}

.room-map-editor__viewport--pannable:active[b-lujdzd53cw] {
    cursor: grabbing;
}

.room-map-editor__canvas[b-lujdzd53cw] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.room-map-editor__image[b-lujdzd53cw] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: crosshair;
    user-select: none;
    -webkit-user-drag: none;
}

.room-map-editor__mask[b-lujdzd53cw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.room-map-editor__dropzone[b-lujdzd53cw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 100%;
    min-height: 16rem;
    border: 2px dashed #b9d3d3;
    border-radius: 0.5rem;
    background: #f4fafa;
    color: var(--brand-text-muted, #5d7a7a);
    cursor: pointer;
    text-align: center;
    padding: 1rem;
}

.room-map-editor__dropzone:hover[b-lujdzd53cw] {
    border-color: #185354;
    background: #eef8f8;
}

.room-map-editor__dropzone input[type="file"][b-lujdzd53cw] {
    max-width: 18rem;
}

.room-chip[b-lujdzd53cw] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    appearance: none;
    border: 2px solid #7a8c8c;
    background: #f1f3f3;
    color: #2c3e3e;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
    touch-action: none;
}

.room-chip--male[b-lujdzd53cw] {
    border-color: #2f6fa8;
    background: #eaf2fa;
    color: #1d4e77;
}

.room-chip--female[b-lujdzd53cw] {
    border-color: #b8548a;
    background: #fbeaf3;
    color: #7c3563;
}

.room-chip--selected[b-lujdzd53cw] {
    outline: 3px solid #185354;
    outline-offset: 1px;
}

.room-chip--highlighted[b-lujdzd53cw] {
    animation: room-chip-pulse-b-lujdzd53cw 1s ease-in-out infinite;
}

@keyframes room-chip-pulse-b-lujdzd53cw {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(24, 83, 84, 0.55);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(24, 83, 84, 0);
    }
}

.room-chip__occupancy[b-lujdzd53cw] {
    opacity: 0.8;
    font-weight: 600;
}

.room-chip__warning[b-lujdzd53cw] {
    color: #b8720a;
}

.room-chip--pending[b-lujdzd53cw] {
    border-style: dashed;
    border-color: #b8720a;
    color: #b8720a;
    background: #fff8ec;
    pointer-events: none;
}

.room-map-editor__sidebar[b-lujdzd53cw] {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.room-map-editor__inspector-row[b-lujdzd53cw] {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
}

.room-map-editor__inspector-row dt[b-lujdzd53cw] {
    color: var(--brand-text-muted, #5d7a7a);
    font-weight: 400;
}

.room-map-editor__inspector-row dd[b-lujdzd53cw] {
    margin: 0;
    font-weight: 600;
}

.room-map-editor__footer[b-lujdzd53cw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--brand-border, #d8e8e8);
}

/* .room-map-editor__body is a flex ROW with the sidebar pinned to a fixed 20rem (320px) - on a
   phone-width viewport (~375px) that alone exceeds the available width, leaving no room for the
   canvas at all. Stack canvas above sidebar instead, each taking the full width. */
@media (max-width: 900px) {
    .room-map-editor__body[b-lujdzd53cw] {
        flex-direction: column;
    }

    .room-map-editor__canvas-area[b-lujdzd53cw] {
        flex: 0 0 18rem;
        min-height: 14rem;
    }

    .room-map-editor__sidebar[b-lujdzd53cw] {
        flex: 1 1 auto;
        width: 100%;
    }

    .room-map-editor__search input[b-lujdzd53cw],
    .room-map-editor__dropzone input[type="file"][b-lujdzd53cw] {
        max-width: none;
    }

    .room-map-editor__meta[b-lujdzd53cw],
    .room-map-editor__footer[b-lujdzd53cw] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* _content/InuniSphere.Web/Components/Shared/WikiPage.razor.rz.scp.css */
.wiki-breadcrumbs[b-1fjuxbdtv8] {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--brand-text-muted, #5d7a7a);
}

.wiki-breadcrumbs a[b-1fjuxbdtv8] {
    color: inherit;
    text-decoration: none;
}

.wiki-breadcrumbs a:hover[b-1fjuxbdtv8] {
    text-decoration: underline;
}

.wiki-breadcrumbs__sep[b-1fjuxbdtv8] {
    margin: 0 0.4rem;
}

.wiki-breadcrumbs [aria-current="page"][b-1fjuxbdtv8] {
    color: var(--brand-text-main, #232323);
    font-weight: 600;
}

.wiki-page[b-1fjuxbdtv8] {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.wiki-header[b-1fjuxbdtv8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.wiki-header h1[b-1fjuxbdtv8] {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
}

.wiki-header__subtitle[b-1fjuxbdtv8] {
    margin: 0;
    color: var(--brand-text-muted, #5d7a7a);
}

.wiki-back[b-1fjuxbdtv8] {
    color: var(--brand-primary, #185354);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.wiki-back:hover[b-1fjuxbdtv8] {
    text-decoration: underline;
}

.wiki-card[b-1fjuxbdtv8] {
    background: #fff;
    border: 1px solid var(--brand-border, #d8e8e8);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    padding: 1.5rem 1.75rem;
}

/* ::deep reaches into ChildContent — markup written in the *caller's* .razor file
   (e.g. IamHelp.razor), which carries the caller's own scope attribute, not this
   component's. Without ::deep these rules would silently match nothing. */
.wiki-card[b-1fjuxbdtv8]  h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
}

.wiki-card[b-1fjuxbdtv8]  h2:first-child {
    margin-top: 0;
}

.wiki-card[b-1fjuxbdtv8]  h3 {
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem;
}

.wiki-card[b-1fjuxbdtv8]  dl {
    margin: 0 0 0.75rem;
}

.wiki-card[b-1fjuxbdtv8]  dt {
    font-weight: 700;
    margin-top: 0.75rem;
}

.wiki-card[b-1fjuxbdtv8]  dt:first-child {
    margin-top: 0;
}

.wiki-card[b-1fjuxbdtv8]  dd {
    margin: 0.15rem 0 0;
    color: var(--brand-text-muted, #5d7a7a);
    line-height: 1.6;
}

.wiki-card[b-1fjuxbdtv8]  code {
    background: var(--brand-accent-soft, #f4fafa);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.85em;
}

.wiki-card[b-1fjuxbdtv8]  p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.wiki-card[b-1fjuxbdtv8]  ul,
.wiki-card[b-1fjuxbdtv8]  ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.wiki-card[b-1fjuxbdtv8]  li {
    margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
    .wiki-header[b-1fjuxbdtv8] {
        flex-direction: column;
    }
}