/* _content/Ilinniarfik/Components/Base/Forms/KimikForm.razor.rz.scp.css */
/* The alert lists every field error the API reported, so it has to read as a short list rather
   than one run-on line. Sizing follows the inline field error (12px) so the two agree. */
.km-form-alert-headline[b-wrge6bq0le] {
    font-weight: 600;
}

.km-form-alert-fields[b-wrge6bq0le] {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 12px;
    font-weight: 400;
}

.km-form-alert-fields li + li[b-wrge6bq0le] {
    margin-top: 2px;
}
/* _content/Ilinniarfik/Components/Base/Forms/KimikFormControl.razor.rz.scp.css */
[b-fhnd4x7dm3] .rz-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    margin-bottom: 6px;
    display: block;
}

.form-control-label[b-fhnd4x7dm3] {
    padding-bottom: 0;
}
/* _content/Ilinniarfik/Components/Base/Forms/KimikPasswordInput.razor.rz.scp.css */
.km-password-field[b-qr618ztttm] {
    width: 100%;
}

/* Replace Radzen's default text-button hover (background tint, shadow, and the primary-dark
   font color shift) with a plain opacity fade — the eye icon keeps its resting colour and just
   dims to 0.8 on hover. */
.km-password-field[b-qr618ztttm]  .rz-button:hover:not(.rz-state-disabled) {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--rz-primary) !important;
    opacity: 0.8;
}
/* _content/Ilinniarfik/Components/Layout/MainLayout.razor.rz.scp.css */

.layout-header[b-drp6wfkq50] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    gap: 12px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.layout-header-spacer[b-drp6wfkq50] {
    flex: 1;
}

.layout-user[b-drp6wfkq50] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms;
}

.layout-user:hover[b-drp6wfkq50] {
    background: #f3f5f8;
}

.layout-user-avatar[b-drp6wfkq50] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b4cca 0%, #2a37c9 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: "Inter", system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.layout-user-name[b-drp6wfkq50] {
    font-size: 13.5px;
    font-weight: 500;
    color: #0f1729;
}

.layout-logout-btn[b-drp6wfkq50] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e6e8ed;
    background: transparent;
    color: #4a5468;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.layout-logout-btn:hover[b-drp6wfkq50] {
    background: #f3f5f8;
    color: #0f1729;
}
/* ── Sidebar toggle button ────────────────────────────────── */
.layout-toggle-btn[b-drp6wfkq50] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e6e8ed;
    background: transparent;
    color: #4a5468;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, color 120ms;
    font-size: 20px;
}

.layout-toggle-btn:hover[b-drp6wfkq50] {
    background: #f3f5f8;
    color: #0f1729;
}

/* ── Sidebar brand block ──────────────────────────────────── */
.sidebar-brand[b-drp6wfkq50] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
    overflow: hidden;
}

.sidebar-brand-info[b-drp6wfkq50] {
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-brand-mark[b-drp6wfkq50] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b4cca 0%, #2a37c9 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: "Inter", system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 76, 202, 0.35);
}

.sidebar-brand-name[b-drp6wfkq50] {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.2;
}

.sidebar-brand-sub[b-drp6wfkq50] {
    font-size: 11px;
    color: rgba(200, 207, 220, 0.6);
    font-family: "Inter", system-ui, sans-serif;
    margin-top: 1px;
}

/* ── Page content ─────────────────────────────────────────── */
.content[b-drp6wfkq50] {
    padding-top: 24px;
    padding-bottom: 24px;
    /* A definite height, so a full-height page (the two calendar shells) can simply be
       `height: 100%` instead of guessing the header's size with 100vh arithmetic. RadzenBody has a
       definite height of its own, so this resolves; a page taller than the viewport still overflows
       and RadzenBody scrolls, exactly as before. */
    height: 100%;
}

/* ── Blazor error UI ──────────────────────────────────────── */
#blazor-error-ui[b-drp6wfkq50] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-drp6wfkq50] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/Ilinniarfik/Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu styling is handled via MainLayout.razor.css Radzen CSS variable overrides */
/* _content/Ilinniarfik/Components/Pages/ApplicantDocumentsDialog.razor.rz.scp.css */
.apd-body[b-zapx3sfv4w] {
    --apd-border: #e6e8ed;
    --apd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 420px;
}

.apd-loading[b-zapx3sfv4w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.apd-error[b-zapx3sfv4w] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--apd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.apd-list[b-zapx3sfv4w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.apd-item[b-zapx3sfv4w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--apd-border);
    border-radius: 8px;
}

.apd-item-icon[b-zapx3sfv4w] {
    font-size: 18px;
    color: #7a8499;
    flex-shrink: 0;
}

.apd-item-body[b-zapx3sfv4w] {
    flex: 1;
    min-width: 0;
}

.apd-item-name[b-zapx3sfv4w] {
    font-size: 13.5px;
    font-weight: 500;
    color: #0f1729;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apd-item-meta[b-zapx3sfv4w] {
    font-size: 12px;
    color: #7a8499;
}

.apd-actions[b-zapx3sfv4w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--apd-border);
}
/* _content/Ilinniarfik/Components/Pages/ApplicantManagement/ApplicantManagementList.razor.rz.scp.css */
/* Says no status is classified as an application phase, so the register cannot match anything.
   Same shape as the Areas page's unassigned-education notice and the status list's own warning — a
   deliberate data gap surfaced where it can be fixed rather than left to look like "no applicants". */
.apl-warning[b-87qoyn0zid] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
    font-size: 0.875rem;
    line-height: 1.45;
}

.apl-warning i[b-87qoyn0zid] {
    flex: 0 0 auto;
    color: var(--amber, #d97706);
}

.apl-warning span[b-87qoyn0zid] {
    flex: 1 1 auto;
}

.apl-warning-link[b-87qoyn0zid] {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.apl-warning-link:hover[b-87qoyn0zid] {
    text-decoration: underline;
}

/* One pill per application, and a person can hold several — let the cell wrap rather than truncate,
   the same way the student list's status summary does. */
.apl-table-card[b-87qoyn0zid]  .rz-data-row .km-badge-row {
    padding: 4px 0;
}
/* _content/Ilinniarfik/Components/Pages/AreaManagement/AreaManagementDetail.razor.rz.scp.css */
/* Card/section/field styling comes from the shared km-* classes in wwwroot/app.css.
   Only the members sub-collection needs page-specific layout. */

.arm-members-card[b-kbnbawefsb] {
    margin-top: 20px;
}

/* The picker is a KimikFormControl (label + input + error slot), so align on the bottom edge —
   centring would float the button against the label rather than the input. */
.arm-add-row[b-kbnbawefsb] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

/* The picker is a drop-down grid (username / name / email), so give it more room than a plain
   select would need. */
.arm-add-field[b-kbnbawefsb] {
    flex: 1 1 auto;
    max-width: 520px;
    min-width: 260px;
}

.arm-add-btn[b-kbnbawefsb] {
    white-space: nowrap;
}

/* The form-group wrapper carries a bottom margin meant for stacked fields; drop it so the button
   and the input sit on the same line. */
.arm-add-field[b-kbnbawefsb]  .form-group {
    margin-bottom: 0;
}

.arm-members-table[b-kbnbawefsb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.arm-members-table th[b-kbnbawefsb] {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.65;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.arm-members-table td[b-kbnbawefsb] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

.arm-members-table tr:last-child td[b-kbnbawefsb] {
    border-bottom: none;
}

.arm-col-actions[b-kbnbawefsb] {
    width: 60px;
    text-align: right;
}
/* _content/Ilinniarfik/Components/Pages/AreaManagement/AreaManagementList.razor.rz.scp.css */
/* Container/header/stats/table-card styling comes from the shared km-* classes in wwwroot/app.css.
   Only the unassigned-educations banner is specific to this page. */

.arl-warning[b-tvxkfehby9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
    font-size: 0.875rem;
    line-height: 1.45;
}

.arl-warning i[b-tvxkfehby9] {
    flex: 0 0 auto;
    color: var(--amber, #d97706);
}

.arl-warning span[b-tvxkfehby9] {
    flex: 1 1 auto;
}

.arl-warning-link[b-tvxkfehby9] {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.arl-warning-link:hover[b-tvxkfehby9] {
    text-decoration: underline;
}
/* _content/Ilinniarfik/Components/Pages/AreaStudentsManagement.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.esm-page[b-kyyljv8up4] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    animation: esmFadeIn-b-kyyljv8up4 180ms ease-out;
}

@keyframes esmFadeIn-b-kyyljv8up4 {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────────── */
.esm-loading[b-kyyljv8up4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Back button ──────────────────────────────────────────── */
.esm-back-btn[b-kyyljv8up4] {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms;
}

.esm-back-btn:hover[b-kyyljv8up4] {
    background: var(--surface-2);
    border-color: #c8cdd8;
}

/* ── Page header ──────────────────────────────────────────── */
.esm-header[b-kyyljv8up4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.esm-title[b-kyyljv8up4] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.esm-subtitle[b-kyyljv8up4] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 3px 0 0;
}

/* ── Info card ────────────────────────────────────────────── */
.esm-info-card[b-kyyljv8up4] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.esm-info-icon[b-kyyljv8up4] {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: #eef0fc;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.esm-info-body[b-kyyljv8up4] {
    flex: 1;
    min-width: 0;
}

.esm-info-title[b-kyyljv8up4] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esm-info-meta[b-kyyljv8up4] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
}

.esm-info-sep[b-kyyljv8up4] {
    color: var(--text-3);
}

.esm-info-label[b-kyyljv8up4] {
    color: var(--text-3);
    font-weight: 500;
}

.esm-info-value[b-kyyljv8up4] {
    color: var(--text-2);
}

/* ── Table card ───────────────────────────────────────────── */
.esm-table-card[b-kyyljv8up4] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.esm-table-header[b-kyyljv8up4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.esm-table-title[b-kyyljv8up4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/AutoScheduler/AutoSchedulerPage.razor.rz.scp.css */
.as-page[b-pq6ou47d93] {
    --surface: #ffffff;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-3: #7a8499;
    --green: #0f7a4d;
    --amber: #a25d00;
    --red: #b91c1c;
    --blue: #1d4ed8;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    animation: asFadeIn-b-pq6ou47d93 180ms ease-out;
}

@keyframes asFadeIn-b-pq6ou47d93 {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.as-loading[b-pq6ou47d93] { display: flex; align-items: center; justify-content: center; padding: 80px; }
.as-header[b-pq6ou47d93] { margin-bottom: 20px; }
.as-title[b-pq6ou47d93] { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.as-subtitle[b-pq6ou47d93] { font-size: 13.5px; color: var(--text-3); margin: 4px 0 0; }

/* Step indicator */
.as-steps[b-pq6ou47d93] {
    display: flex; align-items: center; gap: 0; margin-bottom: 24px;
}
.as-step[b-pq6ou47d93] {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--text-3);
    background: #f3f5f8; transition: all 160ms;
}
.as-step--active[b-pq6ou47d93] { background: #dbeafe; color: var(--blue); }
.as-step--done[b-pq6ou47d93] { background: #dcfce7; color: var(--green); }
.as-step-num[b-pq6ou47d93] { width: 22px; height: 22px; border-radius: 50%; background: currentColor; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.as-step--active .as-step-num[b-pq6ou47d93] { background: var(--blue); }
.as-step--done .as-step-num[b-pq6ou47d93] { background: var(--green); }
.as-step-line[b-pq6ou47d93] { flex: 1; height: 1px; background: var(--border); margin: 0 4px; }

/* Card */
.as-card[b-pq6ou47d93] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; }
.as-card-title[b-pq6ou47d93] { font-size: 15px; font-weight: 600; padding: 20px 24px 0; }
.as-card-footer[b-pq6ou47d93] { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); margin-top: 8px; }
.as-footer-spacer[b-pq6ou47d93] { flex: 1; }

/* Sections */
.as-section[b-pq6ou47d93] { padding: 16px 24px; }
.as-section--divider[b-pq6ou47d93] { border-top: 1px solid var(--border); }
.as-section-title[b-pq6ou47d93] { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }

/* Fields */
.as-field-grid[b-pq6ou47d93] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.as-span-3[b-pq6ou47d93] { grid-column: span 3; }
.as-span-4[b-pq6ou47d93] { grid-column: span 4; }
.as-span-6[b-pq6ou47d93] { grid-column: span 6; }
.as-span-8[b-pq6ou47d93] { grid-column: span 8; }
.as-span-12[b-pq6ou47d93] { grid-column: span 12; }

.as-field-group[b-pq6ou47d93] { display: flex; flex-direction: column; gap: 4px; }
.as-label[b-pq6ou47d93] { font-size: 12px; font-weight: 500; color: #374151; }
/* The quiet "· 24-timers format" note beside a label — an aside, not part of the name. */
.as-label-note[b-pq6ou47d93] { color: var(--text-4); font-weight: 400; }
.as-input[b-pq6ou47d93] { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; color: var(--text); background: #fff; outline: none; width: 100%; box-sizing: border-box; }
.as-input:focus[b-pq6ou47d93] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1); }
.as-readonly[b-pq6ou47d93] { height: 36px; padding: 0 10px; display: flex; align-items: center; font-size: 13.5px; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; background: #f8f9fc; }
.as-hint[b-pq6ou47d93] { font-size: 11.5px; color: var(--text-3); }
.as-error[b-pq6ou47d93] { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; color: var(--red); padding: 10px 16px; margin-bottom: 16px; font-size: 13px; }
.as-warning[b-pq6ou47d93] { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; color: var(--amber); padding: 10px 16px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* Weekday picker */
.as-weekday-picker[b-pq6ou47d93] { display: flex; gap: 6px; flex-wrap: wrap; }
/* nowrap so a chip is always one line — without it a narrow container breaks the day name inside
   the pill, which is what made the row look like a column even once it had the width for it. */
.as-weekday-btn[b-pq6ou47d93] { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border); background: #f3f5f8; font-size: 12.5px; cursor: pointer; color: var(--text-3); white-space: nowrap; }
.as-weekday-btn--active[b-pq6ou47d93] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* Checkbox list */
.as-empty-note[b-pq6ou47d93] { font-size: 12.5px; color: var(--text-3); padding: 8px 0; }
.as-checkbox-item[b-pq6ou47d93] { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Buttons */
.as-btn[b-pq6ou47d93] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 120ms; }
.as-btn:disabled[b-pq6ou47d93] { opacity: 0.5; cursor: not-allowed; }
.as-btn--primary[b-pq6ou47d93] { background: var(--blue); color: #fff; border-color: var(--blue); }
.as-btn--primary:hover:not(:disabled)[b-pq6ou47d93] { background: #1e40af; }
.as-btn--ghost[b-pq6ou47d93] { background: transparent; color: var(--text); border-color: var(--border); }
.as-btn--ghost:hover[b-pq6ou47d93] { background: #f3f5f8; }
.as-btn--small[b-pq6ou47d93] { padding: 3px 10px; font-size: 12px; }

/* Per-session config card (one per weekly session on the Configure step) */
.as-session-slot-card[b-pq6ou47d93] { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #f8f9fc; }
.as-session-slot-header[b-pq6ou47d93] { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.as-session-flex-options[b-pq6ou47d93] { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

/* Preview summary pills */
.as-preview-summary[b-pq6ou47d93] { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 24px; }
.as-summary-pill[b-pq6ou47d93] { display: flex; align-items: center; gap: 8px; background: #f3f5f8; border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--text-3); }
.as-summary-pill--green[b-pq6ou47d93] { background: #dcfce7; border-color: #86efac; color: var(--green); }
.as-summary-pill--amber[b-pq6ou47d93] { background: #fef3c7; border-color: #fcd34d; color: var(--amber); }
.as-summary-pill--blue[b-pq6ou47d93] { background: #dbeafe; border-color: #93c5fd; color: var(--blue); }
.as-summary-num[b-pq6ou47d93] { font-size: 18px; font-weight: 700; }

/* Preview table */
.as-preview-table-wrap[b-pq6ou47d93] { overflow-x: auto; padding: 0 24px 16px; }
.as-preview-table[b-pq6ou47d93] { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-preview-table th[b-pq6ou47d93] { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); font-weight: 600; font-size: 12px; color: var(--text-3); }
.as-preview-table td[b-pq6ou47d93] { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.as-row--conflict td[b-pq6ou47d93] { background: #fff7ed; }
.as-row--skipped td[b-pq6ou47d93] { opacity: 0.45; text-decoration: line-through; }

.as-badge[b-pq6ou47d93] { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.as-badge--ok[b-pq6ou47d93] { background: #dcfce7; color: var(--green); }
.as-badge--conflict[b-pq6ou47d93] { background: #fef3c7; color: var(--amber); }
.as-empty[b-pq6ou47d93] { padding: 32px 24px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* Confirm + Generate + Results */
.as-confirm-box[b-pq6ou47d93] { display: flex; align-items: center; gap: 16px; padding: 24px; background: #f0f9ff; border-radius: 8px; margin: 16px 24px; }
.as-confirm-icon[b-pq6ou47d93] { font-size: 2rem; color: var(--blue); flex-shrink: 0; }
.as-confirm-text[b-pq6ou47d93] { font-size: 13.5px; line-height: 1.6; }
.as-generating[b-pq6ou47d93] { display: flex; flex-direction: column; align-items: center; padding: 40px; gap: 12px; }
.as-generating-text[b-pq6ou47d93] { font-size: 13.5px; color: var(--text-3); }
.as-results[b-pq6ou47d93] { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; gap: 12px; }
.as-results-icon[b-pq6ou47d93] { font-size: 3rem; }
.as-results-icon--ok[b-pq6ou47d93] { color: var(--green); }
.as-results-icon--warn[b-pq6ou47d93] { color: var(--amber); }
.as-results-summary[b-pq6ou47d93] { font-size: 15px; font-weight: 600; }
.as-results-errors[b-pq6ou47d93] { max-height: 200px; overflow-y: auto; width: 100%; border: 1px solid #fca5a5; border-radius: 6px; background: #fee2e2; padding: 8px 12px; }
.as-results-error-row[b-pq6ou47d93] { font-size: 12.5px; color: var(--red); padding: 2px 0; }

/* ── Step 1: which module ──────────────────────────────────────────────────
   Two cards rather than a dropdown, because the choice decides what the whole
   run writes — a new course module, or only bookings on one that exists. */

.as-mode-choice[b-pq6ou47d93] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.as-mode[b-pq6ou47d93] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.as-mode:hover[b-pq6ou47d93] { border-color: var(--border-strong); }

.as-mode--active[b-pq6ou47d93] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.as-mode input[b-pq6ou47d93] { margin-top: 2px; flex-shrink: 0; }

.as-mode-body[b-pq6ou47d93] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.as-mode-title[b-pq6ou47d93] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.as-mode-hint[b-pq6ou47d93] { font-size: 11.5px; color: var(--text-3); }

/* What the chosen module already knows. On screen because these numbers cap the
   preview — a run that stops at 10 sessions should not look like a bug. */
.as-module-facts[b-pq6ou47d93] {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.as-fact[b-pq6ou47d93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.as-fact:first-child[b-pq6ou47d93] { border-top: 0; }
.as-fact-label[b-pq6ou47d93] { color: var(--text-3); }
.as-fact-value[b-pq6ou47d93] { color: var(--text); text-align: right; }

.as-fact--strong[b-pq6ou47d93] {
    background: #f8f9fc;
    font-weight: 600;
}

.as-fact--strong .as-fact-label[b-pq6ou47d93] { color: var(--text-2); }

/* The module id beside the course title in the confirm box. */
.as-confirm-tag[b-pq6ou47d93] {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
}
/* _content/Ilinniarfik/Components/Pages/BatchScheduler/BatchSchedulerPage.razor.rz.scp.css */
.as-page[b-n9mqjosv5e] {
    --surface: #ffffff;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-3: #7a8499;
    --green: #0f7a4d;
    --amber: #a25d00;
    --red: #b91c1c;
    --blue: #1d4ed8;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    animation: asFadeIn-b-n9mqjosv5e 180ms ease-out;
}

@keyframes asFadeIn-b-n9mqjosv5e {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.as-loading[b-n9mqjosv5e] { display: flex; align-items: center; justify-content: center; padding: 80px; }
.as-header[b-n9mqjosv5e] { margin-bottom: 20px; }
.as-title[b-n9mqjosv5e] { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.as-subtitle[b-n9mqjosv5e] { font-size: 13.5px; color: var(--text-3); margin: 4px 0 0; }

/* Step indicator */
.as-steps[b-n9mqjosv5e] {
    display: flex; align-items: center; gap: 0; margin-bottom: 24px;
}
.as-step[b-n9mqjosv5e] {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--text-3);
    background: #f3f5f8; transition: all 160ms;
}
.as-step--active[b-n9mqjosv5e] { background: #dbeafe; color: var(--blue); }
.as-step--done[b-n9mqjosv5e] { background: #dcfce7; color: var(--green); }
.as-step-num[b-n9mqjosv5e] { width: 22px; height: 22px; border-radius: 50%; background: currentColor; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.as-step--active .as-step-num[b-n9mqjosv5e] { background: var(--blue); }
.as-step--done .as-step-num[b-n9mqjosv5e] { background: var(--green); }
.as-step-line[b-n9mqjosv5e] { flex: 1; height: 1px; background: var(--border); margin: 0 4px; }

/* Card */
.as-card[b-n9mqjosv5e] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; }
.as-card-title[b-n9mqjosv5e] { font-size: 15px; font-weight: 600; padding: 20px 24px 0; }
.as-card-footer[b-n9mqjosv5e] { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); margin-top: 8px; }
.as-footer-spacer[b-n9mqjosv5e] { flex: 1; }

/* Sections */
.as-section[b-n9mqjosv5e] { padding: 16px 24px; }
.as-section--divider[b-n9mqjosv5e] { border-top: 1px solid var(--border); }
.as-section-title[b-n9mqjosv5e] { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }

/* Fields */
.as-field-grid[b-n9mqjosv5e] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.as-span-3[b-n9mqjosv5e] { grid-column: span 3; }
.as-span-4[b-n9mqjosv5e] { grid-column: span 4; }
.as-span-6[b-n9mqjosv5e] { grid-column: span 6; }
.as-span-8[b-n9mqjosv5e] { grid-column: span 8; }
.as-span-12[b-n9mqjosv5e] { grid-column: span 12; }

.as-field-group[b-n9mqjosv5e] { display: flex; flex-direction: column; gap: 4px; }
.as-label[b-n9mqjosv5e] { font-size: 12px; font-weight: 500; color: #374151; }
.as-input[b-n9mqjosv5e] { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; color: var(--text); background: #fff; outline: none; width: 100%; box-sizing: border-box; }
.as-input:focus[b-n9mqjosv5e] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1); }
.as-hint[b-n9mqjosv5e] { font-size: 11.5px; color: var(--text-3); align-self: flex-end; padding-bottom: 8px; }
.as-error[b-n9mqjosv5e] { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; color: var(--red); padding: 10px 16px; margin-bottom: 16px; font-size: 13px; }
.as-warning[b-n9mqjosv5e] { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; color: var(--amber); padding: 10px 16px; margin-bottom: 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* Weekday picker */
.as-weekday-picker[b-n9mqjosv5e] { display: flex; gap: 6px; flex-wrap: wrap; }
.as-weekday-btn[b-n9mqjosv5e] { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border); background: #f3f5f8; font-size: 12.5px; cursor: pointer; color: var(--text-3); }
.as-weekday-btn--active[b-n9mqjosv5e] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* Checkbox list */
.as-checkbox-list[b-n9mqjosv5e] { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.as-checkbox-item[b-n9mqjosv5e] { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Buttons */
.as-btn[b-n9mqjosv5e] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 120ms; }
.as-btn:disabled[b-n9mqjosv5e] { opacity: 0.5; cursor: not-allowed; }
.as-btn--primary[b-n9mqjosv5e] { background: var(--blue); color: #fff; border-color: var(--blue); }
.as-btn--primary:hover:not(:disabled)[b-n9mqjosv5e] { background: #1e40af; }
.as-btn--ghost[b-n9mqjosv5e] { background: transparent; color: var(--text); border-color: var(--border); }
.as-btn--ghost:hover[b-n9mqjosv5e] { background: #f3f5f8; }

/* Preview summary pills */
.as-preview-summary[b-n9mqjosv5e] { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 24px; }
.as-summary-pill[b-n9mqjosv5e] { display: flex; align-items: center; gap: 8px; background: #f3f5f8; border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--text-3); }
.as-summary-pill--green[b-n9mqjosv5e] { background: #dcfce7; border-color: #86efac; color: var(--green); }
.as-summary-pill--amber[b-n9mqjosv5e] { background: #fef3c7; border-color: #fcd34d; color: var(--amber); }
.as-summary-num[b-n9mqjosv5e] { font-size: 18px; font-weight: 700; }

/* Preview table */
.as-preview-table-wrap[b-n9mqjosv5e] { overflow-x: auto; padding: 0 24px 16px; }
.as-preview-table[b-n9mqjosv5e] { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-preview-table th[b-n9mqjosv5e] { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); font-weight: 600; font-size: 12px; color: var(--text-3); }
.as-preview-table td[b-n9mqjosv5e] { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.as-row--conflict td[b-n9mqjosv5e] { background: #fff7ed; }
.as-row--skipped td[b-n9mqjosv5e] { opacity: 0.45; text-decoration: line-through; }

.as-badge[b-n9mqjosv5e] { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.as-badge--ok[b-n9mqjosv5e] { background: #dcfce7; color: var(--green); }
.as-badge--conflict[b-n9mqjosv5e] { background: #fef3c7; color: var(--amber); }
.as-empty[b-n9mqjosv5e] { padding: 32px 24px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* Confirm + Generate + Results */
.as-confirm-box[b-n9mqjosv5e] { display: flex; align-items: center; gap: 16px; padding: 24px; background: #f0f9ff; border-radius: 8px; margin: 16px 24px; }
.as-confirm-icon[b-n9mqjosv5e] { font-size: 2rem; color: var(--blue); flex-shrink: 0; }
.as-confirm-text[b-n9mqjosv5e] { font-size: 13.5px; line-height: 1.6; }
.as-generating[b-n9mqjosv5e] { display: flex; flex-direction: column; align-items: center; padding: 40px; gap: 12px; }
.as-generating-text[b-n9mqjosv5e] { font-size: 13.5px; color: var(--text-3); }
.as-results[b-n9mqjosv5e] { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; gap: 8px; }
.as-results-icon[b-n9mqjosv5e] { font-size: 2.5rem; align-self: center; }
.as-results-icon--ok[b-n9mqjosv5e] { color: var(--green); }
.as-results-icon--warn[b-n9mqjosv5e] { color: var(--amber); }
.as-results-summary[b-n9mqjosv5e] { font-size: 14px; }
.as-results-errors[b-n9mqjosv5e] { max-height: 160px; overflow-y: auto; width: 100%; border: 1px solid #fca5a5; border-radius: 6px; background: #fee2e2; padding: 8px 12px; }
.as-results-error-row[b-n9mqjosv5e] { font-size: 12.5px; color: var(--red); padding: 2px 0; }

/* Module cards (batch-specific) */
.bs-module-card[b-n9mqjosv5e] { border-top: 1px solid var(--border); }
.bs-module-card:first-of-type[b-n9mqjosv5e] { border-top: none; }
.bs-module-card--excluded[b-n9mqjosv5e] { opacity: 0.5; }
.bs-module-card--excluded .bs-module-name[b-n9mqjosv5e] { color: var(--text-3); }
.bs-module-header[b-n9mqjosv5e] {
    display: flex; align-items: center; gap: 10px; padding: 14px 24px;
    cursor: pointer; user-select: none;
}
.bs-module-header:hover[b-n9mqjosv5e] { background: #f8f9fc; }
.bs-module-toggle[b-n9mqjosv5e] { display: flex; align-items: center; flex-shrink: 0; cursor: default; }
.bs-module-name[b-n9mqjosv5e] { font-weight: 600; font-size: 14px; flex: 1; }
.bs-module-badge[b-n9mqjosv5e] { background: #dbeafe; color: var(--blue); border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.bs-module-sem-badge[b-n9mqjosv5e] { background: #f3f5f8; border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.bs-module-teachers[b-n9mqjosv5e] { font-size: 12px; color: var(--text-3); flex-shrink: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-module-body[b-n9mqjosv5e] { padding: 0 0 8px; }

/* Preferred location badge */
.bs-pref-num[b-n9mqjosv5e] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.bs-loc-list[b-n9mqjosv5e] { max-height: 240px; }
.as-empty-inline[b-n9mqjosv5e] { font-size: 12.5px; color: var(--text-3); }

/* Preview group (batch-specific) */
.bs-preview-group[b-n9mqjosv5e] { border-top: 1px solid var(--border); }
.bs-preview-group-header[b-n9mqjosv5e] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px 4px; font-size: 13.5px;
}
.bs-preview-stats[b-n9mqjosv5e] { font-size: 12px; color: var(--text-3); margin-left: auto; }
/* _content/Ilinniarfik/Components/Pages/BlackoutManagement/BlackoutManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/BookingDialog.razor.rz.scp.css */
/* Booking editor — implements the "Booking-dialog v2" design.

   The dialog renders in Radzen's body-level portal, so it sits outside .km-page and cannot inherit
   the app's design tokens. They are redeclared on the root here, matching app.css value for value
   (the design's palette and the app's are the same palette). */

.bd[b-ff0zntlrl0] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-hover: #f3f5f8;
    --border: #e6e8ed;
    --border-strong: #d4d8df;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --text-4: #9ba3b4;
    --accent: #3b4cca;
    --accent-hover: #2f3eb0;
    --accent-soft: #eef0fc;
    --accent-text: #2733a8;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --green-border: #a8d5bf;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --amber-border: #e3c48a;
    --red: #b42318;
    --red-soft: #fde7e3;
    --red-border: #e5a49c;
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    /* Popover elevation, from the design's token set. */
    --shadow-lg: 0 12px 32px -8px rgba(15, 23, 41, 0.18), 0 4px 12px -4px rgba(15, 23, 41, 0.08);

    display: flex;
    flex-direction: column;
    /* The host opens the dialog at 600px with no title bar; the shell owns its own chrome. */
    max-height: calc(100vh - 80px);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
}

.bd-loading[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.bd-head[b-ff0zntlrl0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bd-head-icon[b-ff0zntlrl0] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
}

/* Each step's head takes the tone of its own action — amber for calling a lesson off, red for
   destroying the record — so the colour of the dialog says which one you are on before you read it. */
.bd-head-icon--amber[b-ff0zntlrl0] {
    background: var(--amber-soft);
    color: var(--amber);
}

.bd-head-icon--red[b-ff0zntlrl0] {
    background: var(--red-soft);
    color: var(--red);
}

.bd-head-text[b-ff0zntlrl0] {
    flex: 1;
    min-width: 0;
}

.bd-title[b-ff0zntlrl0] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bd-meta[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.bd-meta-id[b-ff0zntlrl0] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.bd-meta-sep[b-ff0zntlrl0] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
}

.bd-meta-dirty[b-ff0zntlrl0] {
    color: var(--amber);
    font-weight: 600;
}

.bd-close[b-ff0zntlrl0] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 14px;
}

.bd-close:hover:not(:disabled)[b-ff0zntlrl0] {
    background: var(--surface-hover);
    color: var(--text);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.bd-body[b-ff0zntlrl0] {
    padding: 16px 20px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.bd-field[b-ff0zntlrl0] {
    display: flex;
    flex-direction: column;
}

/* Align KimikFormControl's own chrome to the design: a 12.5px medium label stacked over a
   38px input, no grid gutters. The control keeps its validation + API-error rendering. */
.bd-field[b-ff0zntlrl0]  .form-group {
    margin: 0;
    display: block;
}

.bd-field[b-ff0zntlrl0]  .form-control-label {
    padding: 0;
    margin-bottom: 6px;
    max-width: 100%;
    flex: 0 0 100%;
}

.bd-field[b-ff0zntlrl0]  .form-control-label label,
.bd-label[b-ff0zntlrl0] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.bd-field[b-ff0zntlrl0]  .form-control-input {
    padding: 0;
    max-width: 100%;
    flex: 0 0 100%;
}

.bd-field[b-ff0zntlrl0]  .rz-textbox,
.bd-field[b-ff0zntlrl0]  .rz-dropdown,
.bd-field[b-ff0zntlrl0]  .rz-datepicker,
.bd-field[b-ff0zntlrl0]  .rz-textarea {
    width: 100%;
}

.bd-label .bd-req[b-ff0zntlrl0],
.bd-req[b-ff0zntlrl0] {
    color: var(--red);
    font-weight: 600;
}

.bd-label-note[b-ff0zntlrl0] {
    color: var(--text-4);
    font-weight: 400;
}

.bd-hint[b-ff0zntlrl0] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 5px;
}

.bd-hint--icon[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bd-check[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Booking type toggle (create only) ──────────────────────────────────── */

.bd-type-toggle[b-ff0zntlrl0] {
    display: flex;
    gap: 6px;
}

.bd-type-option[b-ff0zntlrl0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.bd-type-option--active[b-ff0zntlrl0] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
}

.bd-type-option:disabled[b-ff0zntlrl0] {
    cursor: default;
    opacity: 0.7;
}

/* ── Room finder (meetings) ──────────────────────────────────────────────── */
/* The app picks a room automatically and re-ranks as the search inputs change; this list exists so
   a different one can be chosen instead, not to gate saving on a click — the chosen card (the
   auto-pick, or whichever was clicked) is marked with a filled check rather than merely highlighted,
   so which one is *actually* going to be booked is never ambiguous at a glance. */

.bd-spinner--inline[b-ff0zntlrl0] {
    display: inline-block;
    vertical-align: -1px;
    margin-left: 4px;
    border-color: rgba(15, 23, 41, 0.15);
    border-top-color: var(--text-2);
}

.bd-room-list[b-ff0zntlrl0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.bd-room-card[b-ff0zntlrl0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.bd-room-card:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--surface-hover); border-color: var(--accent); }
.bd-room-card:disabled[b-ff0zntlrl0] { cursor: default; opacity: 0.85; }

.bd-room-card-check[b-ff0zntlrl0] {
    margin-top: 2px;
    font-size: 14px;
    color: var(--border-strong);
}

.bd-room-card--chosen[b-ff0zntlrl0] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.bd-room-card--chosen .bd-room-card-check[b-ff0zntlrl0] { color: var(--accent); }

.bd-room-card-text[b-ff0zntlrl0] { display: flex; flex-direction: column; gap: 2px; }

.bd-room-card-name[b-ff0zntlrl0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.bd-room-card-meta[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-2);
}

.bd-room-badge[b-ff0zntlrl0] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
}

.bd-room-badge--warn[b-ff0zntlrl0] {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: transparent;
}

/* Equipment the caller actually asked for, present on this room — distinguished from the room's
   other equipment so a match stands out at a glance rather than being just another chip. */
.bd-room-badge--match[b-ff0zntlrl0] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

.bd-room-badge--match .bi-check-lg[b-ff0zntlrl0] { margin-right: 2px; }

/* ── Time range ──────────────────────────────────────────────────────────── */

.bd-time-row[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bd-time-arrow[b-ff0zntlrl0] {
    color: var(--text-4);
    flex-shrink: 0;
    font-size: 15px;
}

.bd-dur[b-ff0zntlrl0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Notes (availability, errors, cancelled banner) ──────────────────────── */

.bd-note[b-ff0zntlrl0] {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--r);
    font-size: 12.5px;
    line-height: 1.45;
}

.bd-note--spaced[b-ff0zntlrl0] {
    margin-top: 10px;
}

.bd-note--green[b-ff0zntlrl0] { background: var(--green-soft); color: var(--green); }
.bd-note--amber[b-ff0zntlrl0] { background: var(--amber-soft); color: var(--amber); }
.bd-note--red[b-ff0zntlrl0]   { background: var(--red-soft);   color: var(--red); }

.bd-note > i[b-ff0zntlrl0] {
    flex-shrink: 0;
    margin-top: 1px;
}

.bd-note-body[b-ff0zntlrl0] {
    flex: 1;
    min-width: 0;
}

.bd-note-title[b-ff0zntlrl0] {
    font-weight: 600;
}

.bd-note-detail[b-ff0zntlrl0] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    opacity: 0.85;
    margin-top: 2px;
    word-break: break-word;
}

.bd-override[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Steps ────────────────────────────────────────────────────────────────

   The save confirmation, the cancel step and the delete step each replace the editor rather than
   stacking under it, so they take the plain body surface: at that point the list *is* the content.
   The list itself lives in BookingOccurrenceList; only the framing is here. */

.bd-body--step[b-ff0zntlrl0] {
    gap: 14px;
}

.bd-step-lead[b-ff0zntlrl0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.bd-step-note[b-ff0zntlrl0] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-3);
}

.bd-step-note > i[b-ff0zntlrl0] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Recurrence panel ────────────────────────────────────────────────────── */

.bd-panel[b-ff0zntlrl0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}

.bd-preview[b-ff0zntlrl0] {
    font-size: 12.5px;
    color: var(--text-2);
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.bd-preview-empty[b-ff0zntlrl0] {
    color: var(--text-3);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.bd-foot[b-ff0zntlrl0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.bd-foot-spacer[b-ff0zntlrl0] {
    flex: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.bd-btn[b-ff0zntlrl0] {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 120ms ease;
}

.bd-btn:disabled[b-ff0zntlrl0] {
    opacity: 0.5;
    pointer-events: none;
}

.bd-btn--sm[b-ff0zntlrl0] {
    height: 28px;
    padding: 0 11px;
    font-size: 12.5px;
    border-radius: var(--r-sm);
    margin-top: 8px;
}

.bd-btn--primary[b-ff0zntlrl0] {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.bd-btn--primary:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--accent-hover); }

.bd-btn--ghost[b-ff0zntlrl0] {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-2);
}
.bd-btn--ghost:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--surface-hover); }

.bd-btn--amber[b-ff0zntlrl0] {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--amber);
}
.bd-btn--amber:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--amber-soft); }

.bd-btn--amber-solid[b-ff0zntlrl0] {
    background: var(--amber);
    color: #fff;
}
.bd-btn--amber-solid:hover:not(:disabled)[b-ff0zntlrl0] { background: #874d00; }

.bd-btn--red[b-ff0zntlrl0] {
    background: var(--surface);
    border-color: var(--red-border);
    color: var(--red);
}
.bd-btn--red:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--red-soft); }

.bd-btn--red-solid[b-ff0zntlrl0] {
    background: var(--red);
    color: #fff;
}
.bd-btn--red-solid:hover:not(:disabled)[b-ff0zntlrl0] { background: #96190f; }

.bd-btn--green[b-ff0zntlrl0] {
    background: var(--surface);
    border-color: var(--green-border);
    color: var(--green);
}
.bd-btn--green:hover:not(:disabled)[b-ff0zntlrl0] { background: var(--green-soft); }

.bd-spinner[b-ff0zntlrl0] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bdSpin-b-ff0zntlrl0 600ms linear infinite;
}

@keyframes bdSpin-b-ff0zntlrl0 {
    to { transform: rotate(360deg); }
}

/* The footer holds up to five buttons; below ~520px let them wrap instead of overflowing. */
@media (max-width: 560px) {
    .bd-foot[b-ff0zntlrl0] { flex-wrap: wrap; }
    .bd-foot-spacer[b-ff0zntlrl0] { flex-basis: 100%; height: 0; }
}
/* _content/Ilinniarfik/Components/Pages/BookingManagement.razor.rz.scp.css */
/* Styles moved to Components/Shared/BookingScheduler.razor.css */
/* _content/Ilinniarfik/Components/Pages/BuildingManagement/BuildingManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/CensorshipManagement/CensorshipManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/CensorshipManagement/CensorshipManagementList.razor.rz.scp.css */
[b-x2es6q04t2] .cm-table-card .kimik-table { border: none; border-radius: 0; box-shadow: none; }
[b-x2es6q04t2] .cm-table-card .kimik-table thead th { background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
[b-x2es6q04t2] .cm-table-card .kimik-table tbody tr:hover { background: var(--surface-hover); }
/* _content/Ilinniarfik/Components/Pages/CourseModuleManagement/CourseModuleManagementDetail.razor.rz.scp.css */
/* Hours-planning card in the right rail — "Kursus-detalje" design.

   The card shell, title and meta rows come from the shared .km-aside-* classes in app.css; only
   the figure, the stacked bar and its legend are specific to this card. */

.cm-hours-big[b-qypp4f6b2b] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.cm-hours-val[b-qypp4f6b2b] {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cm-hours-unit[b-qypp4f6b2b],
.cm-hours-cap[b-qypp4f6b2b] {
    font-size: 12px;
    color: var(--text-3);
}

.cm-hours-unit[b-qypp4f6b2b] {
    font-size: 13px;
}

.cm-hours-cap[b-qypp4f6b2b] {
    margin-top: 4px;
}

/* One track, three segments: held, still to come, not yet in the calendar. Widths are clamped to
   the norm so an over-planned course cannot push the bar past its own width. */
.cm-hours-track[b-qypp4f6b2b] {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-hover);
    margin-top: 14px;
}

.cm-hours-seg[b-qypp4f6b2b] {
    transition: width 200ms ease;
}

.cm-hours-seg--taught[b-qypp4f6b2b]   { background: var(--accent); }
.cm-hours-seg--upcoming[b-qypp4f6b2b] { background: #9aa4e8; }
.cm-hours-seg--rest[b-qypp4f6b2b]     { background: var(--border-strong); }

.cm-hours-legend[b-qypp4f6b2b] {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.cm-hours-row[b-qypp4f6b2b] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
}

.cm-hours-row:first-child[b-qypp4f6b2b] {
    border-top: 0;
}

.cm-hours-dot[b-qypp4f6b2b] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.cm-hours-dot--taught[b-qypp4f6b2b]   { background: var(--accent); }
.cm-hours-dot--upcoming[b-qypp4f6b2b] { background: #9aa4e8; }
.cm-hours-dot--rest[b-qypp4f6b2b]     { background: var(--border-strong); }

.cm-hours-lbl[b-qypp4f6b2b] {
    font-size: 13px;
    color: var(--text-2);
}

.cm-hours-num[b-qypp4f6b2b] {
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.cm-hours-pct[b-qypp4f6b2b] {
    font-size: 11.5px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* The norm-hours row is a total, not a segment — no dot, and the label recedes. */
.cm-hours-row--total .cm-hours-lbl[b-qypp4f6b2b] {
    color: var(--text-3);
}

.cm-hours-note[b-qypp4f6b2b] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 11px;
    border-radius: var(--r);
    font-size: 12.5px;
    line-height: 1.45;
}

.cm-hours-note > i[b-qypp4f6b2b] {
    flex-shrink: 0;
    margin-top: 1px;
}

.cm-hours-note--green[b-qypp4f6b2b] { background: var(--green-soft); color: var(--green); }
.cm-hours-note--amber[b-qypp4f6b2b] { background: var(--amber-soft); color: var(--amber); }
.cm-hours-note--red[b-qypp4f6b2b]   { background: var(--red-soft);   color: var(--red); }

.cm-hours-link[b-qypp4f6b2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    margin-top: 12px;
    border-radius: var(--r);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.cm-hours-link:hover[b-qypp4f6b2b] {
    background: var(--surface-hover);
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/CourseModuleManagement/CourseModuleManagementList.razor.rz.scp.css */
/* ── Course type cell ─────────────────────────────────────── */
.cm-coursetype[b-vbhvqn87sm] {
    font-weight: 500;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/CourseModuleParticipantDialog.razor.rz.scp.css */
.cpd-body[b-x25grrp5bm] {
    --cpd-border: #e6e8ed;
    --cpd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 400px;
}

.cpd-error[b-x25grrp5bm] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--cpd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.cpd-actions[b-x25grrp5bm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--cpd-border);
}
/* _content/Ilinniarfik/Components/Pages/CourseModuleParticipantsManagement.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.cmp-page[b-d9bwwdivon] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    animation: cmpFadeIn-b-d9bwwdivon 180ms ease-out;
}

@keyframes cmpFadeIn-b-d9bwwdivon {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────────── */
.cmp-loading[b-d9bwwdivon] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Back button ──────────────────────────────────────────── */
.cmp-back-btn[b-d9bwwdivon] {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms;
}

.cmp-back-btn:hover[b-d9bwwdivon] {
    background: var(--surface-2);
    border-color: #c8cdd8;
}

/* ── Page header ──────────────────────────────────────────── */
.cmp-header[b-d9bwwdivon] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cmp-title[b-d9bwwdivon] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.cmp-subtitle[b-d9bwwdivon] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 3px 0 0;
}

/* ── Info card ────────────────────────────────────────────── */
.cmp-info-card[b-d9bwwdivon] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cmp-info-icon[b-d9bwwdivon] {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: #eef0fc;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cmp-info-body[b-d9bwwdivon] {
    flex: 1;
    min-width: 0;
}

.cmp-info-title[b-d9bwwdivon] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-info-meta[b-d9bwwdivon] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 13px;
}

.cmp-info-label[b-d9bwwdivon] {
    color: var(--text-3);
    font-weight: 500;
}

.cmp-info-value[b-d9bwwdivon] {
    color: var(--text-2);
}

.cmp-info-ongoing[b-d9bwwdivon] {
    color: var(--text-3);
    font-style: normal;
}

/* ── Status badge ─────────────────────────────────────────── */
.cmp-status-badge[b-d9bwwdivon] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.cmp-status-badge--active[b-d9bwwdivon] {
    background: var(--green-soft);
    color: var(--green);
}

.cmp-status-badge--inactive[b-d9bwwdivon] {
    background: #f1f3f5;
    color: #6b7280;
}

.cmp-dot[b-d9bwwdivon] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Table card ───────────────────────────────────────────── */
.cmp-table-card[b-d9bwwdivon] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cmp-table-header[b-d9bwwdivon] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.cmp-table-title[b-d9bwwdivon] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/CourseModuleTeacherDialog.razor.rz.scp.css */
.ctd-body[b-hsyfz0b4im] {
    --ctd-border: #e6e8ed;
    --ctd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 400px;
}

.ctd-error[b-hsyfz0b4im] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--ctd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.ctd-actions[b-hsyfz0b4im] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ctd-border);
}
/* _content/Ilinniarfik/Components/Pages/CourseModuleTeachersManagement.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.cmt-page[b-jjnhuhl3kc] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --red: #b42318;
    --red-soft: #fde7e3;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
    --shadow: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    animation: cmtFadeIn-b-jjnhuhl3kc 180ms ease-out;
}

@keyframes cmtFadeIn-b-jjnhuhl3kc {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────────── */
.cmt-loading[b-jjnhuhl3kc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Back button ──────────────────────────────────────────── */
.cmt-back-btn[b-jjnhuhl3kc] {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms;
}

.cmt-back-btn:hover[b-jjnhuhl3kc] {
    background: var(--surface-2, #fafbfc);
    border-color: #c8cdd8;
}

/* ── Page header ──────────────────────────────────────────── */
.cmt-header[b-jjnhuhl3kc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cmt-title[b-jjnhuhl3kc] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.cmt-subtitle[b-jjnhuhl3kc] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 3px 0 0;
}

/* ── Info card ────────────────────────────────────────────── */
.cmt-info-card[b-jjnhuhl3kc] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cmt-info-icon[b-jjnhuhl3kc] {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: #eef0fc;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cmt-info-body[b-jjnhuhl3kc] {
    flex: 1;
    min-width: 0;
}

.cmt-info-title[b-jjnhuhl3kc] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmt-info-meta[b-jjnhuhl3kc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 13px;
}

.cmt-info-label[b-jjnhuhl3kc] {
    color: var(--text-3);
    font-weight: 500;
}

.cmt-info-value[b-jjnhuhl3kc] {
    color: var(--text-2);
}

.cmt-info-ongoing[b-jjnhuhl3kc] {
    color: var(--text-3);
    font-style: normal;
}

/* ── Status badge ─────────────────────────────────────────── */
.cmt-status-badge[b-jjnhuhl3kc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.cmt-status-badge--active[b-jjnhuhl3kc] {
    background: var(--green-soft);
    color: var(--green);
}

.cmt-status-badge--inactive[b-jjnhuhl3kc] {
    background: #f1f3f5;
    color: #6b7280;
}

.cmt-dot[b-jjnhuhl3kc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Table card ───────────────────────────────────────────── */
.cmt-table-card[b-jjnhuhl3kc] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cmt-table-header[b-jjnhuhl3kc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.cmt-table-title[b-jjnhuhl3kc] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/CourseTypeManagement/CourseTypeManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/CourseTypeManagement/CourseTypeManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/CultureManagement/CultureManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/EducationBlackoutManagement/EducationBlackoutManagementList.razor.rz.scp.css */
.km-filter-field[b-ipud3s6oln] { display: flex; flex-direction: column; gap: 4px; }
.km-filter-label[b-ipud3s6oln] { font-size: 13px; font-weight: 500; color: var(--text-3); }
/* _content/Ilinniarfik/Components/Pages/EducationEnrollmentDialog.razor.rz.scp.css */
.esd-body[b-im4z7l7qne] {
    --esd-border: #e6e8ed;
    --esd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 400px;
}

.esd-error[b-im4z7l7qne] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--esd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.esd-actions[b-im4z7l7qne] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--esd-border);
}

/* Matches EnrollmentStatusDialog's: the follow-up change is a second, optional entry, set apart so
   it reads as an addition to the status above it rather than more fields belonging to it. */
.esd-followup[b-im4z7l7qne] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--esd-border);
}
/* _content/Ilinniarfik/Components/Pages/EducationManagement/EducationCourseTypeDialog.razor.rz.scp.css */
.ectd-body[b-i7g879jz1j] {
    --ectd-border: #e6e8ed;
    --ectd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 400px;
}

.ectd-error[b-i7g879jz1j] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--ectd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.ectd-actions[b-i7g879jz1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ectd-border);
}
/* _content/Ilinniarfik/Components/Pages/EducationManagement/EducationCourseTypeManagement.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.ect-page[b-p8j7bfv1qo] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    animation: ectFadeIn-b-p8j7bfv1qo 180ms ease-out;
}

@keyframes ectFadeIn-b-p8j7bfv1qo {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────────── */
.ect-loading[b-p8j7bfv1qo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Back button ──────────────────────────────────────────── */
.ect-back-btn[b-p8j7bfv1qo] {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms;
}

.ect-back-btn:hover[b-p8j7bfv1qo] {
    background: var(--surface-2);
    border-color: #c8cdd8;
}

/* ── Page header ──────────────────────────────────────────── */
.ect-header[b-p8j7bfv1qo] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ect-title[b-p8j7bfv1qo] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.ect-subtitle[b-p8j7bfv1qo] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 3px 0 0;
}

/* ── Info card ────────────────────────────────────────────── */
.ect-info-card[b-p8j7bfv1qo] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ect-info-icon[b-p8j7bfv1qo] {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: #eef0fc;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ect-info-body[b-p8j7bfv1qo] {
    flex: 1;
    min-width: 0;
}

.ect-info-title[b-p8j7bfv1qo] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ect-info-meta[b-p8j7bfv1qo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 13px;
}

.ect-info-label[b-p8j7bfv1qo] {
    color: var(--text-3);
    font-weight: 500;
}

.ect-info-value[b-p8j7bfv1qo] {
    color: var(--text-2);
}

.ect-info-ongoing[b-p8j7bfv1qo] {
    color: var(--text-3);
    font-style: normal;
}

/* ── Status badge ─────────────────────────────────────────── */
.ect-status-badge[b-p8j7bfv1qo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.ect-status-badge--active[b-p8j7bfv1qo] {
    background: var(--green-soft);
    color: var(--green);
}

.ect-status-badge--inactive[b-p8j7bfv1qo] {
    background: #f1f3f5;
    color: #6b7280;
}

.ect-dot[b-p8j7bfv1qo] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Table card ───────────────────────────────────────────── */
.ect-table-card[b-p8j7bfv1qo] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ect-table-header[b-p8j7bfv1qo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.ect-table-title[b-p8j7bfv1qo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/EducationManagement/EducationManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/EducationManagement/EducationManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/EducationStudentsManagement.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.esm-page[b-bk4g6i49is] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    animation: esmFadeIn-b-bk4g6i49is 180ms ease-out;
}

@keyframes esmFadeIn-b-bk4g6i49is {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────────── */
.esm-loading[b-bk4g6i49is] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Back button ──────────────────────────────────────────── */
.esm-back-btn[b-bk4g6i49is] {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms;
}

.esm-back-btn:hover[b-bk4g6i49is] {
    background: var(--surface-2);
    border-color: #c8cdd8;
}

/* ── Page header ──────────────────────────────────────────── */
.esm-header[b-bk4g6i49is] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.esm-title[b-bk4g6i49is] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.esm-subtitle[b-bk4g6i49is] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 3px 0 0;
}

/* ── Info card ────────────────────────────────────────────── */
.esm-info-card[b-bk4g6i49is] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.esm-info-icon[b-bk4g6i49is] {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: #eef0fc;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.esm-info-body[b-bk4g6i49is] {
    flex: 1;
    min-width: 0;
}

.esm-info-title[b-bk4g6i49is] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esm-info-meta[b-bk4g6i49is] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
}

.esm-info-sep[b-bk4g6i49is] {
    color: var(--text-3);
}

.esm-info-label[b-bk4g6i49is] {
    color: var(--text-3);
    font-weight: 500;
}

.esm-info-value[b-bk4g6i49is] {
    color: var(--text-2);
}

.esm-info-ongoing[b-bk4g6i49is] {
    color: var(--text-3);
    font-style: normal;
}

/* ── Status badge ─────────────────────────────────────────── */
.esm-status-badge[b-bk4g6i49is] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.esm-status-badge--active[b-bk4g6i49is] {
    background: var(--green-soft);
    color: var(--green);
}

.esm-status-badge--inactive[b-bk4g6i49is] {
    background: #f1f3f5;
    color: #6b7280;
}

.esm-dot[b-bk4g6i49is] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Table card ───────────────────────────────────────────── */
.esm-table-card[b-bk4g6i49is] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.esm-table-header[b-bk4g6i49is] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.esm-table-title[b-bk4g6i49is] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
/* _content/Ilinniarfik/Components/Pages/EnrollmentDialog.razor.rz.scp.css */
.ed-body[b-5o6lcmto5u] {
    --ed-border: #e6e8ed;
    --ed-text: #0f1729;
    --ed-text-3: #7a8499;
    --ed-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 420px;
}

.ed-error[b-5o6lcmto5u] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--ed-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.ed-actions[b-5o6lcmto5u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ed-border);
}
/* _content/Ilinniarfik/Components/Pages/EnrollmentStatusDialog.razor.rz.scp.css */
/* Scoped CSS doesn't cross component boundaries, so .esd-body/.esd-error repeat
   EducationEnrollmentDialog's rules rather than inheriting them — the two dialogs open from the
   same screens and would otherwise sit at visibly different widths with different error styling.
   The step rail below is this dialog's own. */
.esd-body[b-x9zqdspwiy] {
    --esd-border: #e6e8ed;
    --esd-line: #eceef2;
    --esd-muted: #7a8499;
    --esd-ink: #0f1729;
    --esd-accent: #3730c4;
    --esd-warn: #a25d00;
    --esd-red: #b42318;

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
    min-width: 400px;
}

/* Which enrollment, and what it is now — the dialog changes a status, and the one it is changing
   from is the fact you need to decide what to change it to. */
.esd-context[b-x9zqdspwiy] {
    font-size: 12.5px;
    color: var(--esd-muted);
    text-wrap: pretty;
}

.esd-steps[b-x9zqdspwiy] {
    display: flex;
    flex-direction: column;
}

/* Rail + content. The rail's numbered badge and connecting line are what make a run of entries read
   as one sequence rather than as repeated copies of the same form. */
.esd-step[b-x9zqdspwiy] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 13px;
    align-items: stretch;
}

.esd-rail[b-x9zqdspwiy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.esd-badge[b-x9zqdspwiy] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
}

/* No status chosen yet, so there is no phase colour to take. The dashed outline says the step is
   started but incomplete, which is also what the summary line beside Save is complaining about. */
.esd-badge--empty[b-x9zqdspwiy],
.esd-badge--add[b-x9zqdspwiy] {
    background: #fff;
    color: #9ba3b4;
    border: 1px dashed #d4d8df;
}

.esd-line[b-x9zqdspwiy] {
    flex: 1;
    width: 0;
    min-height: 12px;
    border-left: 2px solid var(--esd-line);
}

/* Dashed for a step that has not taken effect yet — the same distinction the status timeline draws
   between what happened and what is planned. */
.esd-line--future[b-x9zqdspwiy] {
    border-left-style: dashed;
    border-left-color: #d4d8df;
}

.esd-step-main[b-x9zqdspwiy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-bottom: 16px;
}

.esd-step-head[b-x9zqdspwiy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.esd-step-title[b-x9zqdspwiy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 500;
}

.esd-tag[b-x9zqdspwiy] {
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    border: 1px dashed #c9cdd6;
    color: var(--esd-muted);
    white-space: nowrap;
}

.esd-remove[b-x9zqdspwiy] {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--esd-muted);
    flex-shrink: 0;
}

.esd-remove:hover[b-x9zqdspwiy] {
    color: var(--esd-red);
}

/* A step that has already been written. Shown as what it is rather than as inputs, because
   re-editing it would post a second copy the unique index then rejects. */
.esd-step-done[b-x9zqdspwiy] {
    font-size: 13px;
    color: var(--esd-muted);
}

.esd-step-row[b-x9zqdspwiy] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.esd-step-status[b-x9zqdspwiy] {
    flex: 1 1 190px;
    min-width: 0;
}

.esd-step-date[b-x9zqdspwiy] {
    flex: 0 1 170px;
    min-width: 0;
}

.esd-step--add[b-x9zqdspwiy] {
    padding-bottom: 4px;
}

.esd-add[b-x9zqdspwiy] {
    width: 100%;
    padding: 10px 14px;
    border: 1px dashed #c9cdd6;
    border-radius: 10px;
    background: #fcfcfd;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.esd-add:hover[b-x9zqdspwiy] {
    border-color: var(--esd-accent);
    background: #f7f7fe;
}

.esd-add-title[b-x9zqdspwiy] {
    font-size: 13px;
    font-weight: 500;
    color: var(--esd-accent);
}

.esd-add-hint[b-x9zqdspwiy] {
    font-size: 11.5px;
    color: var(--esd-muted);
    text-wrap: pretty;
}

.esd-error[b-x9zqdspwiy] {
    font-size: 13px;
    padding: 8px 12px;
    background: #fde7e3;
    color: var(--esd-red);
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.esd-actions[b-x9zqdspwiy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--esd-border);
}

/* The chain read back, or what is stopping it. One line, because a step landing before the one
   above it is a fault of the run rather than of either step, and it belongs next to the button it
   disables. */
.esd-summary[b-x9zqdspwiy] {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 12px;
    color: #4a5468;
    text-wrap: pretty;
}

.esd-summary--warn[b-x9zqdspwiy] {
    color: var(--esd-warn);
}

.esd-buttons[b-x9zqdspwiy] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
/* _content/Ilinniarfik/Components/Pages/EquipmentManagement/EquipmentManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/EvaluationTypeManagement/EvaluationTypeManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/EvaluationTypeManagement/EvaluationTypeManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/ExaminationTypeManagement/ExaminationTypeManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/ExaminationTypeManagement/ExaminationTypeManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/Home.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.ov-page[b-9am5959721] {
    --accent: #3b4cca;
    --accent-soft: #eef0fc;
    --surface: #ffffff;
    --surface-hover: #f3f5f8;
    --border: #e6e8ed;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --text-4: #9ba3b4;
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
    --shadow: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);

    padding: 24px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
    animation: ovFadeIn-b-9am5959721 180ms ease-out;
}

@keyframes ovFadeIn-b-9am5959721 {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Hero ─────────────────────────────────────────────────── */
.ov-hero[b-9am5959721] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
}

.ov-hero-content[b-9am5959721] {
    position: relative;
}

.ov-hero-date[b-9am5959721] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.ov-hero-greeting[b-9am5959721] {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 8px;
}

.ov-hero-sub[b-9am5959721] {
    font-size: 14px;
    color: var(--text-3);
    margin: 0;
    max-width: 560px;
}

/* ── Dashboard switch ─────────────────────────────────────── */
/* The hero slot. The pills themselves live in KmPillSwitch.razor.css — shared with the account
   area's settings/notifications switch — so only their position is set here. */
.ov-hero-switch[b-9am5959721] {
    position: absolute;
    top: 20px;
    right: 24px;
}

@media (max-width: 720px) {
    /* Too narrow to sit beside the greeting — drop it below instead of overlapping. */
    .ov-hero-switch[b-9am5959721] {
        position: static;
        margin-top: 16px;
        width: fit-content;
    }
}

/* ── Sections ─────────────────────────────────────────────── */
.ov-sections[b-9am5959721] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ov-section-header[b-9am5959721] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.ov-section-icon[b-9am5959721] {
    font-size: 13px;
    color: var(--text-3);
}

.ov-section-label[b-9am5959721] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ov-section-spacer[b-9am5959721] {
    flex: 1;
}

.ov-section-desc[b-9am5959721] {
    font-size: 12px;
    color: var(--text-4);
}

/* ── Card grid ────────────────────────────────────────────── */
.ov-grid[b-9am5959721] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

/* ── Card ─────────────────────────────────────────────────── */
.ov-card[b-9am5959721] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
    overflow: hidden;
}

.ov-card:hover[b-9am5959721] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

.ov-card-body[b-9am5959721] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 14px;
    flex: 1;
}

/* ── Icon tile ────────────────────────────────────────────── */
.ov-tile[b-9am5959721] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ov-tile--blue[b-9am5959721]   { background: #eef3fb; color: #2c5fab; box-shadow: inset 0 0 0 1px #dde7f4; }
.ov-tile--rose[b-9am5959721]   { background: #faedf1; color: #9f3460; box-shadow: inset 0 0 0 1px #f1dde4; }
.ov-tile--green[b-9am5959721]  { background: #e8f3ec; color: #2f7a4a; box-shadow: inset 0 0 0 1px #d4e8db; }
.ov-tile--amber[b-9am5959721]  { background: #f6efde; color: #86641a; box-shadow: inset 0 0 0 1px #ece2c5; }
.ov-tile--violet[b-9am5959721] { background: #efebf7; color: #5a4399; box-shadow: inset 0 0 0 1px #dfd7ef; }
.ov-tile--teal[b-9am5959721]   { background: #e2f1f3; color: #1f6470; box-shadow: inset 0 0 0 1px #cfe5e9; }
.ov-tile--slate[b-9am5959721]  { background: #eef0f4; color: #475569; box-shadow: inset 0 0 0 1px #dfe3ea; }

/* ── Card text ────────────────────────────────────────────── */
.ov-card-label[b-9am5959721] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.ov-card-sub[b-9am5959721] {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.4;
}

/* ── Card footer ──────────────────────────────────────────── */
.ov-card-footer[b-9am5959721] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-3);
    font-weight: 500;
}

.ov-card-arrow[b-9am5959721] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 140ms, transform 140ms;
    flex-shrink: 0;
}

.ov-card:hover .ov-card-arrow[b-9am5959721] {
    background: var(--accent-soft);
    transform: translateX(2px);
}

/* ── Footer ───────────────────────────────────────────────── */
.ov-footer[b-9am5959721] {
    margin-top: 32px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-4);
    text-align: center;
    letter-spacing: 0.01em;
}
/* _content/Ilinniarfik/Components/Pages/Integrations/Integrations.razor.rz.scp.css */
/* ── Controls ─────────────────────────────────────────────────────── */
.int-controls[b-w2vxzpktby] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.int-tabs[b-w2vxzpktby] {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 2px;
}

.int-tab[b-w2vxzpktby] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    background: transparent;
    cursor: pointer;
    transition: color 120ms, background 120ms;
}

.int-tab.on[b-w2vxzpktby] {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
}

.int-tab-count[b-w2vxzpktby] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

.int-tab.on .int-tab-count[b-w2vxzpktby] { color: var(--text-3); }

.int-search[b-w2vxzpktby] {
    position: relative;
    width: 260px;
}

.int-search > i[b-w2vxzpktby] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-4);
    font-size: 13px;
}

.int-search input[b-w2vxzpktby] {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 13.5px;
    color: var(--text);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}

.int-search input:focus[b-w2vxzpktby] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.int-controls-spacer[b-w2vxzpktby] { flex: 1; }

.int-catselect[b-w2vxzpktby] {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    font-size: 13.5px;
    color: var(--text-2);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8499' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* ── Grid + cards ─────────────────────────────────────────────────── */
.int-grid[b-w2vxzpktby] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.int-card[b-w2vxzpktby] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}

.int-card:hover[b-w2vxzpktby] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.int-card-top[b-w2vxzpktby] { display: flex; align-items: flex-start; gap: 12px; }

.int-logo[b-w2vxzpktby] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.int-logo--lg[b-w2vxzpktby] { width: 52px; height: 52px; border-radius: 13px; font-size: 20px; }

.int-card-heading[b-w2vxzpktby] { flex: 1; min-width: 0; }

.int-card-name[b-w2vxzpktby] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.int-card-cat[b-w2vxzpktby] { font-size: 12px; color: var(--text-4); margin-top: 1px; }

.int-card-blurb[b-w2vxzpktby] {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    flex: 1;
}

.int-card-footer[b-w2vxzpktby] {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.int-card-since[b-w2vxzpktby] { font-size: 12px; color: var(--text-3); }

.int-card-btn[b-w2vxzpktby] {
    margin-left: auto;
    height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* ── Status badge ─────────────────────────────────────────────────── */
.int-badge[b-w2vxzpktby] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.int-badge-dot[b-w2vxzpktby] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.int-badge--connected[b-w2vxzpktby] { color: var(--green); background: var(--green-soft); }
.int-badge--available[b-w2vxzpktby] { color: var(--text-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }

/* ── Empty state ──────────────────────────────────────────────────── */
.int-empty[b-w2vxzpktby] {
    text-align: center;
    padding: 80px 0;
    color: var(--text-3);
}

.int-empty-title[b-w2vxzpktby] { font-size: 15px; margin-bottom: 4px; }

/* ── Drawer ───────────────────────────────────────────────────────── */
.int-overlay[b-w2vxzpktby] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 41, 0.32);
    backdrop-filter: blur(2px);
    z-index: 1050;
    animation: int-fade-in-b-w2vxzpktby 180ms ease-out;
}

.int-drawer[b-w2vxzpktby] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    animation: int-slide-in-b-w2vxzpktby 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes int-fade-in-b-w2vxzpktby { from { opacity: 0; } to { opacity: 1; } }
@keyframes int-slide-in-b-w2vxzpktby { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.int-drawer-head[b-w2vxzpktby] {
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.int-drawer-heading[b-w2vxzpktby] { flex: 1; min-width: 0; }
.int-drawer-name[b-w2vxzpktby] { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.int-drawer-cat[b-w2vxzpktby] { font-size: 12.5px; color: var(--text-3); margin: 1px 0 8px; }

.int-drawer-close[b-w2vxzpktby] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 120ms, color 120ms;
}

.int-drawer-close:hover[b-w2vxzpktby] { background: var(--surface-hover); color: var(--text); }

.int-drawer-body[b-w2vxzpktby] { flex: 1; overflow-y: auto; padding: 20px 24px; }

.int-drawer-desc[b-w2vxzpktby] { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 22px; }

.int-sec-label[b-w2vxzpktby] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.int-kv-card[b-w2vxzpktby] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 22px;
}

.int-kv[b-w2vxzpktby] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}

.int-kv--last[b-w2vxzpktby] { border-bottom: none; }
.int-kv-k[b-w2vxzpktby] { font-size: 12.5px; color: var(--text-3); }
.int-kv-v[b-w2vxzpktby] { font-size: 12.5px; color: var(--text); font-weight: 500; }
.int-kv-v.mono[b-w2vxzpktby] { font-family: ui-monospace, "JetBrains Mono", monospace; }

.int-status--connected[b-w2vxzpktby] { color: var(--green); font-weight: 600; }
.int-drawer-foot[b-w2vxzpktby] {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.int-drawer-foot--split[b-w2vxzpktby] { justify-content: space-between; }
.int-foot-actions[b-w2vxzpktby] { display: flex; gap: 8px; }

.int-btn-danger-text[b-w2vxzpktby] { color: var(--red); }


/* Inline banners for load/save errors, save confirmations and connection-test results. Replaces the
   mockup's hardcoded amber "needs attention" strip, which had no backend counterpart. */
.int-error-banner[b-w2vxzpktby],
.int-success-banner[b-w2vxzpktby] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
}

.int-error-banner[b-w2vxzpktby] {
    background: var(--red-soft);
    color: var(--red);
}

.int-success-banner[b-w2vxzpktby] {
    background: var(--green-soft);
    color: var(--green);
}

.int-error-banner > i[b-w2vxzpktby],
.int-success-banner > i[b-w2vxzpktby] { flex-shrink: 0; }

/* Help text and the "leave blank to keep" hint under a secret field. */
.int-field-hint[b-w2vxzpktby] {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px;
    line-height: 1.5;
}
/* _content/Ilinniarfik/Components/Pages/Integrations/ItReg/ItRegImport.razor.rz.scp.css */
.km-subtitle[b-1or7q8cem7] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 4px 0 0;
}

/* ── Shared cell types ────────────────────────────────────── */
.km-name-cell[b-1or7q8cem7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.km-avatar[b-1or7q8cem7] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}

.km-email[b-1or7q8cem7] {
    color: var(--accent);
    font-size: 13px;
}

.km-mono[b-1or7q8cem7] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    letter-spacing: 0.01em;
}

.km-empty[b-1or7q8cem7] {
    color: var(--text-4);
}

/* ── Banners ──────────────────────────────────────────────── */
.itr-error-banner[b-1or7q8cem7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--red-soft);
    border: 1px solid #f9c7c3;
    border-radius: var(--r);
    color: var(--red);
    font-size: 13px;
}

.itr-error-banner--top[b-1or7q8cem7] {
    margin: 16px 20px 0;
}

/* ── Import summary ───────────────────────────────────────── */
.itr-import-summary[b-1or7q8cem7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 20px 0;
}

.itr-import-stat[b-1or7q8cem7] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--text-2);
}

.itr-import-stat--created[b-1or7q8cem7] { background: var(--green-soft); color: var(--green); }
.itr-import-stat--linked[b-1or7q8cem7]  { background: var(--accent-soft); color: var(--accent); }
.itr-import-stat--skip[b-1or7q8cem7]    { background: var(--slate-soft); color: var(--slate); }
.itr-import-stat--warn[b-1or7q8cem7]    { background: var(--amber-soft); color: var(--amber); }
.itr-import-stat--fail[b-1or7q8cem7]    { background: var(--red-soft); color: var(--red); }

/* ── Table ────────────────────────────────────────────────── */
.itr-table[b-1or7q8cem7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.itr-table thead tr[b-1or7q8cem7] {
    border-bottom: 1px solid var(--border);
}

.itr-table th[b-1or7q8cem7] {
    padding: 10px var(--row-px);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    text-align: left;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--surface-2);
}

.itr-table td[b-1or7q8cem7] {
    padding: 0 var(--row-px);
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.itr-table tbody tr:last-child td[b-1or7q8cem7] {
    border-bottom: none;
}

.itr-table tbody tr:hover td[b-1or7q8cem7] {
    background: var(--surface-hover);
}

/* ── Education cell (truncate long names) ─────────────────── */
.itr-edu-cell[b-1or7q8cem7] {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Search / empty prompt ────────────────────────────────── */
.itr-prompt[b-1or7q8cem7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px;
    gap: 10px;
    color: var(--text-4);
}

.itr-prompt-icon[b-1or7q8cem7] {
    font-size: 36px;
}

.itr-prompt-text[b-1or7q8cem7] {
    margin: 0;
    font-size: 14px;
    color: var(--text-3);
    text-align: center;
    max-width: 380px;
}
/* _content/Ilinniarfik/Components/Pages/LocationManagement/LocationManagementDetail.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/LocationManagement/LocationManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/MyAccount.razor.rz.scp.css */
/* The trailing "contact administration" note sits under the grid, not inside a field stack. */
.km-section-fields > p.km-hint[b-azwefrgdqd] {
    margin: 12px 0 0;
}
/* _content/Ilinniarfik/Components/Pages/Notifications/NotificationsList.razor.rz.scp.css */
.nt-filters[b-8sa3v93877] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.nt-card[b-8sa3v93877] {
    padding: 0;
    overflow: hidden;
}

.nt-row[b-8sa3v93877] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--km-border-subtle, #f1f5f9);
    cursor: pointer;
    transition: background 100ms;
}

.nt-row:last-child[b-8sa3v93877] {
    border-bottom: none;
}

.nt-row:hover[b-8sa3v93877] {
    background: var(--km-surface-2, #f8fafc);
}

.nt-row-unread[b-8sa3v93877] {
    background: rgba(59, 76, 202, 0.04);
}

/* Slot is always reserved so read and unread rows line up. */
.nt-dot[b-8sa3v93877] {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.nt-dot-on[b-8sa3v93877] {
    background: var(--km-accent, #3b4cca);
}

.nt-row-body[b-8sa3v93877] {
    min-width: 0;
    flex: 1;
}

.nt-row-head[b-8sa3v93877] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nt-row-title[b-8sa3v93877] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--km-text, #0f172a);
}

.nt-row-unread .nt-row-title[b-8sa3v93877] {
    font-weight: 700;
}

.nt-chip[b-8sa3v93877] {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nt-chip-important[b-8sa3v93877] {
    background: #fef3f2;
    color: #b42318;
}

.nt-row-text[b-8sa3v93877] {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--km-text-2, #475569);
}

.nt-row-time[b-8sa3v93877] {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--km-text-3, #94a3b8);
}

.nt-more[b-8sa3v93877] {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
/* _content/Ilinniarfik/Components/Pages/PersonManagement/PersonManagementDetail.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/PersonManagement/PersonManagementList.razor.rz.scp.css */
/* ── Filter card ──────────────────────────────────────────── */
/* _content/Ilinniarfik/Components/Pages/RolePermissionManagement/RolePermissionManagementList.razor.rz.scp.css */
.km-subtitle[b-4v3qx40hzj] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 4px 0 0;
    max-width: 600px;
}

/* ── Table ────────────────────────────────────────────────── */
.rpm-table[b-4v3qx40hzj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rpm-table thead tr[b-4v3qx40hzj] {
    border-bottom: 1px solid var(--border);
}

.rpm-table th[b-4v3qx40hzj] {
    padding: 10px var(--row-px);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    text-align: left;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--surface-2);
}

.rpm-table td[b-4v3qx40hzj] {
    padding: 0 var(--row-px);
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.rpm-table tbody tr:last-child td[b-4v3qx40hzj] { border-bottom: none; }
.rpm-table tbody tr:hover td[b-4v3qx40hzj] { background: var(--surface-hover); }

/* ── Role code badge ──────────────────────────────────────── */
.rpm-code[b-4v3qx40hzj] {
    font-family: "JetBrains Mono", "Courier New", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    letter-spacing: 0.02em;
}

/* ── Permission count badges ──────────────────────────────── */
.rpm-badge[b-4v3qx40hzj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-sm);
}

.rpm-badge--ro[b-4v3qx40hzj] {
    color: var(--accent);
    background: var(--accent-soft);
}

.rpm-badge--rw[b-4v3qx40hzj] {
    color: var(--green);
    background: var(--green-soft);
}

/* ── Actions ──────────────────────────────────────────────── */
.rpm-actions[b-4v3qx40hzj] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* `pm-icon-btn` carries no global rule, so style the row buttons here. */
.rpm-actions .pm-icon-btn[b-4v3qx40hzj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-3);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.rpm-actions .pm-icon-btn:hover[b-4v3qx40hzj] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Empty state ──────────────────────────────────────────── */
.rpm-empty[b-4v3qx40hzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px;
    gap: 10px;
    color: var(--text-4);
}

.rpm-empty-icon[b-4v3qx40hzj] { font-size: 36px; }

.rpm-empty-text[b-4v3qx40hzj] {
    margin: 0;
    font-size: 14px;
    color: var(--text-3);
    text-align: center;
}
/* _content/Ilinniarfik/Components/Pages/RolePermissionManagement/RolePolicyDetail.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Role policy detail — presentational preview (roles_preview.png).
   Uses the global km design tokens from wwwroot/app.css.
   ════════════════════════════════════════════════════════════════════ */

.rp-page[b-o6epltyiah] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    color: var(--text);
    font-size: 14px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.rp-crumbs[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 12.5px;
}

.rp-crumb[b-o6epltyiah] { color: var(--text-3); text-decoration: none; }
.rp-crumb:hover[b-o6epltyiah] { color: var(--text-2); }
.rp-crumb-sep[b-o6epltyiah] { font-size: 10px; color: var(--text-4); }
.rp-crumb-active[b-o6epltyiah] { color: var(--text-2); font-weight: 550; }

/* ── Hero header ────────────────────────────────────────────────────── */
.rp-hero[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.rp-back[b-o6epltyiah] {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
}
.rp-back:hover[b-o6epltyiah] { background: var(--surface-hover); }

.rp-hero-icon[b-o6epltyiah] {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
}

.rp-hero-text[b-o6epltyiah] { flex: 1 1 auto; min-width: 0; }

.rp-hero-titlerow[b-o6epltyiah] { display: flex; align-items: center; gap: 9px; }
.rp-hero-titlerow h1[b-o6epltyiah] {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.rp-edit[b-o6epltyiah] { color: var(--text-4); font-size: 13px; cursor: pointer; }
.rp-edit:hover[b-o6epltyiah] { color: var(--text-2); }

.rp-hero-sub[b-o6epltyiah] { margin-top: 3px; font-size: 13px; color: var(--text-3); }

.rp-hero-actions[b-o6epltyiah] { display: flex; align-items: center; gap: 12px; }

/* ── Avatar stack ───────────────────────────────────────────────────── */
.rp-avatars[b-o6epltyiah] { display: flex; align-items: center; }
.rp-av[b-o6epltyiah] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--surface);
    margin-left: -8px;
    font-size: 11px;
    font-weight: 650;
    color: #fff;
}
.rp-av:first-child[b-o6epltyiah] { margin-left: 0; }
.rp-av--more[b-o6epltyiah] { background: var(--surface-hover) !important; color: var(--text-2); font-size: 10.5px; }
.rp-av--sm[b-o6epltyiah] { width: 26px; height: 26px; border-width: 0; margin-left: 0; font-size: 10px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.rp-btn[b-o6epltyiah] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}
.rp-btn--ghost[b-o6epltyiah] { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.rp-btn--ghost:hover[b-o6epltyiah] { background: var(--surface-hover); }
.rp-btn--primary[b-o6epltyiah] { background: var(--accent); color: #fff; }
.rp-btn--primary:hover[b-o6epltyiah] { background: var(--accent-hover); }

/* ── Legend strip ───────────────────────────────────────────────────── */
.rp-legend[b-o6epltyiah] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 11px 16px;
    margin-bottom: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.rp-legend-item[b-o6epltyiah] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.rp-ldot[b-o6epltyiah] { width: 9px; height: 9px; border-radius: 50%; }

/* ── Two-column body ────────────────────────────────────────────────── */
.rp-body[b-o6epltyiah] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* ── Resource list ──────────────────────────────────────────────────── */
/* One card per resource group rather than one card for the whole catalogue: as plain labels inside
   a single card, the group headings didn't read as headings at all. */
.rp-main[b-o6epltyiah] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rp-group[b-o6epltyiah] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* The card's header. No bottom border of its own — the first row's border-top already draws that
   line, and two would stack into a 2px rule. */
.rp-group-label[b-o6epltyiah] {
    padding: 12px 20px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}

.rp-row[b-o6epltyiah] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Was a fixed height. The scope badges wrap when a resource grants several operations with long
       limiter labels, so the row has to be free to grow with them. */
    min-height: 56px;
    padding: 9px 20px;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
}
.rp-row:hover[b-o6epltyiah] { background: var(--surface-hover); }
.rp-row--active[b-o6epltyiah],
.rp-row--active:hover[b-o6epltyiah] { background: var(--accent-soft); border-left-color: var(--accent); }

.rp-row-main[b-o6epltyiah] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-row-name[b-o6epltyiah] { font-size: 13.5px; font-weight: 550; color: var(--text); }
.rp-row-sum[b-o6epltyiah] { font-size: 12px; color: var(--text-3); }

/* One badge per granted operation, wrapping onto further lines rather than being cut off — the
   limiter labels run long ("Egne områder (kun egne fag)") and the whole point is reading them. */
.rp-row-scopes[b-o6epltyiah] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

/* ── Access badges + state colours ──────────────────────────────────── */
.rp-badge[b-o6epltyiah] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.rp-badge i[b-o6epltyiah] { font-size: 11px; }

/* The in-row scope badges: same palette as the count pill, dialled down so the resource name and
   the count still lead the row. */
.rp-badge--sm[b-o6epltyiah] {
    height: 19px;
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: 550;
}

.rp-acc--scoped[b-o6epltyiah] { background: var(--amber-soft); color: var(--amber); }
.rp-acc--read[b-o6epltyiah]   { background: var(--accent-soft); color: var(--accent); }
.rp-acc--full[b-o6epltyiah]   { background: var(--green-soft); color: var(--green); }
.rp-acc--none[b-o6epltyiah]   { background: var(--slate-soft); color: var(--text-3); }

/* legend dots reuse the state colours as solid fills */
.rp-ldot.rp-acc--scoped[b-o6epltyiah] { background: var(--amber); }
.rp-ldot.rp-acc--read[b-o6epltyiah]   { background: var(--accent); }
.rp-ldot.rp-acc--full[b-o6epltyiah]   { background: var(--green); }
.rp-ldot.rp-acc--none[b-o6epltyiah]   { background: var(--text-4); }

/* ── Detail aside ───────────────────────────────────────────────────── */
.rp-aside[b-o6epltyiah] {
    position: sticky;
    top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
}

.rp-aside-eyebrow[b-o6epltyiah] {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    color: var(--text-4);
}
.rp-aside-titlerow[b-o6epltyiah] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.rp-aside-title[b-o6epltyiah] { margin: 4px 0 0; font-size: 18px; font-weight: 650; }
.rp-aside-count[b-o6epltyiah] {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* ── Bulk "all operations" picker ───────────────────────────────────── */
.rp-bulk[b-o6epltyiah] {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #c9cff5;
    border-radius: var(--r);
    background: var(--accent-soft);
}
.rp-bulk-row[b-o6epltyiah] { display: flex; align-items: center; gap: 12px; }
.rp-bulk-label[b-o6epltyiah] {
    flex: none;
    width: 78px;
    font-size: 12px;
    font-weight: 650;
    color: var(--accent);
}
.rp-bulk-help[b-o6epltyiah] {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-2);
}

.rp-field-label[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.05em;
    color: var(--text-4);
}
.rp-livetag[b-o6epltyiah] { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
.rp-livedot[b-o6epltyiah] { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ── Access-level selector ──────────────────────────────────────────── */
.rp-level-grid[b-o6epltyiah] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-level[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}
.rp-level:hover[b-o6epltyiah] { background: var(--surface-hover); }
.rp-level i[b-o6epltyiah] { font-size: 14px; color: var(--text-4); }
.rp-level-tick[b-o6epltyiah] { margin-left: auto; }
.rp-level--active[b-o6epltyiah] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rp-level--active i[b-o6epltyiah] { color: var(--accent); }

/* ── Rule builder ───────────────────────────────────────────────────── */
.rp-rule[b-o6epltyiah] {
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 13px;
    line-height: 2.1;
    color: var(--text-2);
}
.rp-chip[b-o6epltyiah] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rp-chip i[b-o6epltyiah] { font-size: 9px; opacity: 0.65; }
.rp-chip--subject[b-o6epltyiah]  { background: var(--accent-soft); color: var(--accent); }
.rp-chip--relation[b-o6epltyiah] { background: var(--amber-soft); color: var(--amber); }
.rp-chip--action[b-o6epltyiah]   { background: var(--green-soft); color: var(--green); }
.rp-chip--object[b-o6epltyiah]   { background: var(--green-soft); color: var(--green); }

.rp-rule-note[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-4);
}
.rp-rule-note strong[b-o6epltyiah] { color: var(--text-3); font-weight: 650; }

/* ── Live preview ───────────────────────────────────────────────────── */
.rp-live-box[b-o6epltyiah] {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.rp-live-head[b-o6epltyiah] { font-size: 14px; font-weight: 650; color: var(--text); }
.rp-live-sub[b-o6epltyiah] { margin: 2px 0 10px; font-size: 12px; color: var(--text-3); }

.rp-person[b-o6epltyiah] { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.rp-person + .rp-person[b-o6epltyiah] { border-top: 1px solid var(--border); }
.rp-person-name[b-o6epltyiah] { flex: 1 1 auto; font-size: 13px; font-weight: 550; }
.rp-classes[b-o6epltyiah] { font-size: 11.5px; color: var(--text-3); }

/* ── Aside footer ───────────────────────────────────────────────────── */
.rp-aside-footer[b-o6epltyiah] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ── Per-operation limiter editor ───────────────────────────────────── */
.rp-loading[b-o6epltyiah] { display: flex; justify-content: center; padding: 80px 0; }

.rp-ops[b-o6epltyiah] { display: flex; flex-direction: column; gap: 8px; }

.rp-op-row[b-o6epltyiah] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}
.rp-op-label[b-o6epltyiah] {
    flex: none;
    width: 78px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
/* Wraps a KimikFormControl now rather than being the <select> itself, so it sizes the control
   from the outside. The control renders no label here (none is passed) — the rp-op-label span
   beside it names the operation — so its form-group wrapper carries no margin of its own. */
.rp-op-select[b-o6epltyiah] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
}
.rp-op-select[b-o6epltyiah]  .form-group { margin-bottom: 0; }
.rp-op-select[b-o6epltyiah]  .rz-dropdown { width: 100%; }

.rp-aside-note[b-o6epltyiah] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: var(--accent-soft);
    border-radius: var(--r);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-2);
}
.rp-aside-note i[b-o6epltyiah] { color: var(--accent); margin-top: 1px; }
.rp-aside-note strong[b-o6epltyiah] { color: var(--text); font-weight: 650; }

.rp-footer-hint[b-o6epltyiah] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-3);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .rp-body[b-o6epltyiah] { grid-template-columns: 1fr; }
    .rp-aside[b-o6epltyiah] { position: static; }
}
/* _content/Ilinniarfik/Components/Pages/ServiceAccountManagement/CreateApiKeyDialog.razor.rz.scp.css */
.sa-dialog[b-v38xjs0pqv] { min-width: 420px; }

.sa-dialog-footer[b-v38xjs0pqv] { padding: 16px 0 0; }

.sa-hint[b-v38xjs0pqv] { font-size: 12px; color: var(--text-3); margin-top: 6px; }

.sa-error[b-v38xjs0pqv] { color: var(--red); font-size: 13px; }

.sa-warning[b-v38xjs0pqv] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--amber-soft);
    color: var(--text-2);
    font-size: 13px;
    margin-bottom: 12px;
}

.sa-warning i[b-v38xjs0pqv] { color: var(--amber); }

.sa-key-box[b-v38xjs0pqv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}

.sa-key-box code[b-v38xjs0pqv] {
    flex: 1;
    word-break: break-all;
    font-size: 12px;
}
/* _content/Ilinniarfik/Components/Pages/ServiceAccountManagement/ServiceAccountDetail.razor.rz.scp.css */
.sa-table[b-x9hp5itq0n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sa-table th[b-x9hp5itq0n] {
    text-align: left;
    font-weight: 600;
    color: var(--text-3);
    font-size: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.sa-table td[b-x9hp5itq0n] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.sa-actions[b-x9hp5itq0n] { text-align: right; }

.sa-label[b-x9hp5itq0n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin: 14px 0 6px;
}

.sa-chips[b-x9hp5itq0n] { display: flex; flex-wrap: wrap; gap: 6px; }

.sa-chip[b-x9hp5itq0n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 13px;
}

.sa-chip-x[b-x9hp5itq0n] {
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.sa-chip-x:hover[b-x9hp5itq0n] { color: var(--red); }

.sa-none[b-x9hp5itq0n] { color: var(--text-4); font-size: 13px; }

.sa-add-row[b-x9hp5itq0n] { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

.sa-callout[b-x9hp5itq0n] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 13px;
}

.sa-error[b-x9hp5itq0n] { color: var(--red); font-size: 13px; }
/* _content/Ilinniarfik/Components/Pages/Settings/Controls/SettingsListCard.razor.rz.scp.css */
/* Header lays the title/subtitle out against the add button. (Base padding/borders come from the
   layout's ::deep .set-card-head rule.) */
.set-list-head[b-f540nxffq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The embedded KimikApiDataTable is already styled globally (app.css rz-datagrid rules) to the same
   Personstyring look the design mimics, and the grid is borderless — so it just needs to sit flush
   inside the card. The card's border + overflow:hidden frames it; no per-table border here. */
.set-list-body[b-f540nxffq6]  .rz-datagrid,
.set-list-body[b-f540nxffq6]  .rz-datatable {
    border: none;
    border-radius: 0;
    margin-top: 0 !important; /* drop the grid's rz-mt-2 so it sits flush under the card header */
}
/* _content/Ilinniarfik/Components/Pages/Settings/SettingsLayout.razor.rz.scp.css */
/* Bleed out of the content area's 24px padding so the settings subsystem fills it edge-to-edge,
   like the design: the category panel sits flush against the main sidebar with no gap.
   (The Radzen body padding is dropped for this page in app.css via .rz-body:has(.settings-page).) */
.settings-page[b-nlklwyw0tj] {
    margin: -24px;
}

.settings[b-nlklwyw0tj] {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 56px); /* fill below the 56px app header even on short panels */
}

/* ── Category sub-nav ─────────────────────────────────────────────── */
.settings-nav[b-nlklwyw0tj] {
    width: 232px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 20px 12px;
}

/* The column stretches to the panel's full height (for the divider); its content stays pinned. */
.settings-nav-sticky[b-nlklwyw0tj] {
    position: sticky;
    top: 24px;
}

.settings-nav-title[b-nlklwyw0tj] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 0 8px 4px;
}

.settings-nav-sub[b-nlklwyw0tj] {
    font-size: 12.5px;
    color: var(--text-3);
    padding: 0 8px 16px;
}

.settings-cat[b-nlklwyw0tj] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 450;
    color: var(--text-2);
    background: transparent;
    text-align: left;
    text-decoration: none;
    margin-bottom: 1px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.settings-cat i[b-nlklwyw0tj] {
    font-size: 15px;
    color: var(--text-3);
    transition: color 120ms;
}

.settings-cat:hover:not(.active)[b-nlklwyw0tj] { background: var(--surface-hover); }

.settings-cat.active[b-nlklwyw0tj] {
    background: var(--accent-soft);
    color: #2733a8; /* design --accent-text: darker than --accent for readable active label */
    font-weight: 600;
}

.settings-cat.active i[b-nlklwyw0tj] { color: var(--accent); }

/* ── Panel ────────────────────────────────────────────────────────── */
.settings-panel[b-nlklwyw0tj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.settings-panel-inner[b-nlklwyw0tj] {
    flex: 1;
    width: 100%;
    max-width: 812px;
    margin: 0 auto;
    padding: 28px 32px;
}

.settings-panel-head[b-nlklwyw0tj] { margin-bottom: 20px; }

.settings-panel-head h1[b-nlklwyw0tj] {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.settings-panel-head p[b-nlklwyw0tj] {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 5px 0 0;
}

/* ── Sticky save bar ──────────────────────────────────────────────── */
.set-savebar[b-nlklwyw0tj] {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 32px;
    box-shadow: 0 -4px 16px -10px rgba(15, 23, 41, 0.1);
}

.set-savebar-inner[b-nlklwyw0tj] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 812px;
    width: 100%;
    margin: 0 auto;
    font-size: 12.5px;
    color: var(--text-3);
}

.set-savebar-spacer[b-nlklwyw0tj] { flex: 1; }

.set-dot[b-nlklwyw0tj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
}

/* ── Panel content (rendered by the panel pages + control components in @Body) ──────────
   These live in the child components' render trees, so they are reached with ::deep. */

/* Misc bits used in a few panels */
.settings-page[b-nlklwyw0tj]  .set-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4a5cee, #2733a8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.settings-page[b-nlklwyw0tj]  .set-callout-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.settings-page[b-nlklwyw0tj]  .set-swatches { display: flex; gap: 8px; }

.settings-page[b-nlklwyw0tj]  .set-swatch {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.settings-page[b-nlklwyw0tj]  .set-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }

.settings-page[b-nlklwyw0tj]  .set-swatch i {
    color: #fff;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
/* _content/Ilinniarfik/Components/Pages/StorageFileManagement/StorageFileManagementDetail.razor.rz.scp.css */
.sfmd-upload-label[b-5b59na1wbf] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a5468;
    margin-bottom: 6px;
}

.sfmd-file-input[b-5b59na1wbf] {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #e6e8ed;
    border-radius: 6px;
    cursor: pointer;
    background: #fafbfc;
}

.sfmd-file-info[b-5b59na1wbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #e3f3eb;
    border-radius: 6px;
    font-size: 13px;
    color: #0f7a4d;
}

.sfmd-file-meta[b-5b59na1wbf] {
    margin-left: auto;
    font-size: 12px;
    color: #4a5468;
}

.sfmd-storage-key .km-meta-val[b-5b59na1wbf] {
    word-break: break-all;
    font-size: 12px;
}

.km-meta-val--mono[b-5b59na1wbf] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* _content/Ilinniarfik/Components/Pages/StorageFileManagement/StorageFileManagementList.razor.rz.scp.css */
[b-ak9c3pbagu] .sfm-table-card .kimik-table { border: none; border-radius: 0; box-shadow: none; }
[b-ak9c3pbagu] .sfm-table-card .kimik-table thead th { background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
[b-ak9c3pbagu] .sfm-table-card .kimik-table tbody tr:hover { background: var(--surface-hover); }
/* _content/Ilinniarfik/Components/Pages/StudentManagement/StudentManagementDetail.razor.rz.scp.css */
.km-enrollment-empty[b-k02gj9ryxw] {
    font-size: 13px;
    color: var(--text-4);
    margin: 0;
}

.km-enrollment-item[b-k02gj9ryxw] {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.km-enrollment-item:first-of-type[b-k02gj9ryxw] {
    border-top: none;
    padding-top: 0;
}

.km-enrollment-status[b-k02gj9ryxw] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.km-sync-panel[b-k02gj9ryxw] {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.km-sync-title[b-k02gj9ryxw] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    margin-bottom: 2px;
}

.km-sync-banner[b-k02gj9ryxw] {
    padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
}

.km-sync-banner--error[b-k02gj9ryxw] {
    background: var(--red-soft);
    color: var(--red);
}

.km-sync-banner--success[b-k02gj9ryxw] {
    background: var(--green-soft);
    color: var(--green);
}

.km-sync-save[b-k02gj9ryxw] {
    margin-top: 4px;
    align-self: flex-start;
}
/* _content/Ilinniarfik/Components/Pages/StudentManagement/StudentManagementList.razor.rz.scp.css */
/* ── PDF generating banner ────────────────────────────────── */
.sm-pdf-banner[b-zn6rcmxvjf] {
    background: var(--accent-soft);
    border: 1px solid #c7cdee;
    border-radius: var(--r-lg);
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--accent);
}


/* ── Enrollment subrows — design 1c, "Fortsættelsesrækker" ───────────────────
   Each enrollment reads as a continuation of its student rather than a nested
   table: an elbow connector under the name, the education where the name sits,
   the status as a pill. The columns are the parent's columns — same order, same
   widths — so the two grids read as one table rather than a table inside a table. */
.sm-subrows[b-zn6rcmxvjf] {
    background: var(--surface-2);
    animation: sm-sub-in-b-zn6rcmxvjf 160ms ease-out;
}

@keyframes sm-sub-in-b-zn6rcmxvjf {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The same four columns as the parent row: expand, name, e-mail, actions. Every
   width comes from the constants in the codebehind via ColumnGeometryStyle —
   the same values fed to the Radzen columns — so the two cannot drift apart. */
.sm-subrow[b-zn6rcmxvjf] {
    display: grid;
    grid-template-columns:
        var(--sm-col-expand)
        var(--sm-col-name)
        var(--sm-col-email)
        var(--sm-col-summary)
        var(--sm-col-actions);
    align-items: center;
    height: 46px;
    border-top: 1px solid var(--border);
    transition: background 100ms;
}

/* Radzen pads its cells 0.25rem 0.5rem; matching the horizontal half puts the
   subrow text on the same left edge as the parent cell text above it. */
.sm-subrow > *[b-zn6rcmxvjf] {
    padding: 0 0.5rem;
    min-width: 0;
}

.sm-subrow:first-child[b-zn6rcmxvjf] {
    border-top: 0;
}

.sm-subrow:hover[b-zn6rcmxvjf] {
    background: var(--surface-hover);
}

/* Mirrors the parent name cell's layout — a 28px leading slot then the text — so
   the education title lands on the same left edge as the person's name. */
.sm-subrow-main[b-zn6rcmxvjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The elbow that ties the row back up to its student, in the avatar's slot. */
.sm-subrow-connector[b-zn6rcmxvjf] {
    width: 28px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    color: var(--border-strong);
}

.sm-subrow-text[b-zn6rcmxvjf] {
    min-width: 0;
}

.sm-subrow-program[b-zn6rcmxvjf] {
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-subrow-meta[b-zn6rcmxvjf] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 1px;
}

.sm-subrow-status[b-zn6rcmxvjf] {
    min-width: 0;
}

/* The status pill itself is the global .km-badge (see app.css) — shared with the
   summary column so the two are identical rather than merely similar, and global
   because the summary cell is built with RenderTreeBuilder and a scoped rule would
   never match it. */

.sm-subrow-empty[b-zn6rcmxvjf] {
    margin: 0;
    padding: 12px 0.5rem 12px calc(var(--sm-col-expand) + 0.5rem);
    color: var(--text-3);
    font-size: 13px;
    font-style: italic;
}

/* Narrow screens: the actions column is the first to go. */
@media (max-width: 900px) {
    .sm-subrow[b-zn6rcmxvjf] {
        grid-template-columns: var(--sm-col-expand) minmax(0, 1fr) auto;
    }

    /* The e-mail cell is empty in a subrow; on a narrow grid it would just eat space. */
    .sm-subrow > *:nth-child(3)[b-zn6rcmxvjf] {
        display: none;
    }
}

/* The fold arrow's own column: Radzen gives it a full cell's padding on both
   sides, which leaves the chevron floating in dead space. Narrow it to the
   shared width and tighten the padding — excluding the expansion row, whose
   single full-width <td> is also a first child. */
[b-zn6rcmxvjf] .rz-grid-table tr:not(.rz-expanded-row-content) > th:first-child,
[b-zn6rcmxvjf] .rz-grid-table tr:not(.rz-expanded-row-content) > td:first-child {
    width: var(--sm-col-expand);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center;
}

/* ── Radzen detail-row overrides ─────────────────────────────────────────────
   Radzen puts the Template inside .rz-expanded-row-template, itself inside the
   expansion row's <td>. Both carry their own padding, border and background, so
   left alone the subrow band sits in an inset box with the grid showing through
   down both sides. Matched by :has() on the wrapper rather than by the row's
   class name, so it holds regardless of what Radzen calls that <tr>. */
[b-zn6rcmxvjf] td:has(> .rz-expanded-row-template) {
    padding: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

[b-zn6rcmxvjf] .rz-expanded-row-template {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Radzen paints an expanded PARENT row in its hover colour. Every row here is
   expanded by default, so that would leave the whole table looking permanently
   hovered — reset it and let the row's real hover state show through. */
[b-zn6rcmxvjf] tr.rz-expanded-row > td {
    background-color: transparent;
}
/* _content/Ilinniarfik/Components/Pages/StudentOverview.razor.rz.scp.css */
/* ── Design tokens ─────────────────────────────────────────── */
.so-page[b-wtcnypgkg8] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-hover: #f3f5f8;
    --border: #e6e8ed;
    --border-strong: #d4d8df;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --text-4: #9ba3b4;
    --accent: #3b4cca;
    --accent-hover: #2f3eb0;
    --accent-soft: #eef0fc;
    --green: #0f7a4d;
    --green-soft: #e3f3eb;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --red: #b42318;
    --red-soft: #fde7e3;
    --slate: #475569;
    --slate-soft: #eef1f5;
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);

    display: flex;
    flex-direction: column;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
    animation: soFadeIn-b-wtcnypgkg8 200ms ease-out;
}

@keyframes soFadeIn-b-wtcnypgkg8 {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading / error ──────────────────────────────────────── */
.so-loading[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
}

.so-error[b-wtcnypgkg8] {
    margin: 40px 32px;
    padding: 12px 16px;
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid #fca5a5;
    border-radius: var(--r);
    font-size: 13.5px;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.so-crumb-strip[b-wtcnypgkg8] {
    padding: 16px 32px 0;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

.so-crumbs[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-3);
    margin: 0;
    padding: 0;
}

.so-crumb-link[b-wtcnypgkg8] {
    color: var(--text-3);
    text-decoration: none;
    transition: color 120ms;
}

.so-crumb-link:hover[b-wtcnypgkg8] { color: var(--accent); }

.so-crumb-sep[b-wtcnypgkg8] {
    font-size: 10px;
    color: var(--text-4);
}

.so-crumb-active[b-wtcnypgkg8] {
    color: var(--text);
    font-weight: 500;
}

/* ── Body layout ──────────────────────────────────────────── */
.so-body[b-wtcnypgkg8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    padding: 16px 32px 32px;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    align-items: start;
}

.so-main-col[b-wtcnypgkg8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── Panel header ─────────────────────────────────────────── */
.so-panel-header[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.so-panel-title[b-wtcnypgkg8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* ── Empty state ──────────────────────────────────────────── */
.so-empty[b-wtcnypgkg8] {
    padding: 32px 20px;
    font-size: 13.5px;
    color: var(--text-3);
    text-align: center;
}

/* ── Tab header row ───────────────────────────────────────── */
.so-tab-header[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px 8px;
}

.so-tab-meta[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.so-tab-title[b-wtcnypgkg8] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.so-tab-status[b-wtcnypgkg8] {
    font-size: 12px;
    color: var(--text-3);
}

.so-tab-date[b-wtcnypgkg8] {
    font-size: 12px;
    color: var(--text-3);
}

/* ── Grid ─────────────────────────────────────────────────── */
.so-grid[b-wtcnypgkg8] {
    border-top: 1px solid var(--border);
}

.so-cell-muted[b-wtcnypgkg8] {
    color: var(--text-3);
    font-size: 12.5px;
}

/* ── Status dots ──────────────────────────────────────────── */
.so-dot[b-wtcnypgkg8] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.so-dot--active[b-wtcnypgkg8]  { background: var(--green); }
.so-dot--inactive[b-wtcnypgkg8] { background: var(--slate); }

/* ── Badges ───────────────────────────────────────────────── */
.so-badge[b-wtcnypgkg8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

.so-badge--green[b-wtcnypgkg8]  { background: var(--green-soft);  color: var(--green); }
.so-badge--red[b-wtcnypgkg8]    { background: var(--red-soft);    color: var(--red); }
.so-badge--amber[b-wtcnypgkg8]  { background: var(--amber-soft);  color: var(--amber); }
.so-badge--slate[b-wtcnypgkg8]  { background: var(--slate-soft);  color: var(--slate); }

/* ── Summary row ──────────────────────────────────────────── */
.so-summary-row[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.so-summary-sep[b-wtcnypgkg8] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
}

/* ── Aside panel ──────────────────────────────────────────── */
.so-aside[b-wtcnypgkg8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.so-aside-card[b-wtcnypgkg8] {
    display: flex;
    flex-direction: column;
}

/* ── Profile hero ─────────────────────────────────────────── */
.so-profile-hero[b-wtcnypgkg8] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--border);
}

.so-avatar[b-wtcnypgkg8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.so-profile-info[b-wtcnypgkg8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.so-profile-name[b-wtcnypgkg8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-status-badge[b-wtcnypgkg8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

.so-status-badge--active[b-wtcnypgkg8]   { background: var(--green-soft); color: var(--green); }
.so-status-badge--inactive[b-wtcnypgkg8] { background: var(--slate-soft); color: var(--slate); }

/* ── Aside sections ───────────────────────────────────────── */
.so-aside-section[b-wtcnypgkg8] {
    padding: 16px 18px;
}

.so-aside-section--divider[b-wtcnypgkg8] {
    border-top: 1px solid var(--border);
}

.so-aside-label[b-wtcnypgkg8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.so-meta-list[b-wtcnypgkg8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.so-meta-item[b-wtcnypgkg8] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

.so-meta-key[b-wtcnypgkg8] {
    color: var(--text-3);
    flex-shrink: 0;
}

.so-meta-val[b-wtcnypgkg8] {
    color: var(--text);
    font-weight: 500;
    font-family: "JetBrains Mono", "Courier New", ui-monospace, monospace;
    font-size: 12px;
    text-align: right;
    word-break: break-all;
}

.so-meta-val--normal[b-wtcnypgkg8] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12.5px;
}

/* ── Radzen overrides ─────────────────────────────────────── */
[b-wtcnypgkg8] .so-main-col .rz-tabview-panels {
    padding: 12px 16px 16px;
}

[b-wtcnypgkg8] .so-main-col .rz-tabview-nav {
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

[b-wtcnypgkg8] .so-grid .rz-datatable {
    border: none;
}
/* _content/Ilinniarfik/Components/Pages/StudentStatusManagement/StudentStatusManagementList.razor.rz.scp.css */
/* Only what this page adds. Everything else — the design tokens, the Inter stack, the fade-in, the
   page padding and max-width, the loading block, the header, the table card — comes from the shared
   km-* classes in app.css, which this page now uses like every other list page.
   The block that used to live here re-declared those tokens verbatim and hardcoded the page's own
   font and animation, so it was a copy of .km-page that could only drift from it. */

/* Says the application phase is unclassified. Same shape as the Areas page's unassigned-education
   notice — a deliberate data gap surfaced where it can be fixed, rather than left to be found. */
.sst-warning[b-ujvbx7grlh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
    font-size: 0.875rem;
    line-height: 1.45;
}

.sst-warning i[b-ujvbx7grlh] {
    flex: 0 0 auto;
    color: var(--amber, #d97706);
}

.sst-warning span[b-ujvbx7grlh] {
    flex: 1 1 auto;
}
/* _content/Ilinniarfik/Components/Pages/SyllabusFileCategoryManagement/SyllabusFileCategoryManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/SyllabusManagement/SyllabusManagementDetail.razor.rz.scp.css */
/* ── Dropzone ─────────────────────────────────────────────── */
.sd-drop[b-07rufuw5or] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    margin-bottom: 20px;
    transition: border-color 120ms, background 120ms;
}

.sd-drop:hover[b-07rufuw5or],
.sd-drop:focus-within[b-07rufuw5or],
.sd-drop--busy[b-07rufuw5or] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* The hidden <input type=file> lives in the markup and is driven by JS (OpenPicker
   clicks it). It's hidden with an inline style="display:none" because this scoped
   sheet can't target a child component's rendered element. */

.sd-drop-icon[b-07rufuw5or] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    pointer-events: none;
}

.sd-drop-body[b-07rufuw5or] {
    flex: 1;
    min-width: 200px;
    pointer-events: none;
}

.sd-drop-title[b-07rufuw5or] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.sd-drop-sub[b-07rufuw5or] {
    font-size: 12.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.sd-drop-controls[b-07rufuw5or] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sd-drop-into[b-07rufuw5or] {
    font-size: 12.5px;
    color: var(--text-3);
}

.sd-drop-target[b-07rufuw5or] {
    height: 34px;
    max-width: 220px;
}

/* ── Category section ─────────────────────────────────────── */
.sd-cat[b-07rufuw5or] {
    margin-top: 26px;
}

.sd-cat:first-of-type[b-07rufuw5or] {
    margin-top: 4px;
}

.sd-cat-head[b-07rufuw5or] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.sd-cat-icon[b-07rufuw5or] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sd-cat-label[b-07rufuw5or] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.sd-cat-count[b-07rufuw5or] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
    font-variant-numeric: tabular-nums;
}

.sd-cat-right[b-07rufuw5or] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sd-cat-size[b-07rufuw5or] {
    font-size: 12px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

.sd-cat-add[b-07rufuw5or] {
    height: 30px;
    padding: 0 11px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.sd-cat-add:hover[b-07rufuw5or] {
    background: var(--surface-hover);
    color: var(--text);
}

/* ── File list + rows ─────────────────────────────────────── */
.sd-file-list[b-07rufuw5or] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-top: 12px;
}

.sd-file-row[b-07rufuw5or] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    transition: background 120ms;
}

.sd-file-row:first-child[b-07rufuw5or] {
    border-top: none;
}

.sd-file-row:hover[b-07rufuw5or] {
    background: var(--surface-hover);
}

.sd-file-row:hover .sd-row-actions[b-07rufuw5or] {
    opacity: 1;
}

.sd-badge[b-07rufuw5or] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.02em;
}

.sd-file-main[b-07rufuw5or] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sd-file-name[b-07rufuw5or] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-file-name:hover[b-07rufuw5or] {
    color: var(--accent);
    text-decoration: underline;
}

.sd-file-meta[b-07rufuw5or] {
    font-size: 12px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.sd-sep[b-07rufuw5or] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
}

.sd-by[b-07rufuw5or] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sd-avatar[b-07rufuw5or] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    flex-shrink: 0;
}

.sd-file-descview[b-07rufuw5or] {
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: 2px;
}

/* ── Inline file edit panel (opened by the pencil) ────────── */
.sd-file-edit[b-07rufuw5or] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.sd-edit-field[b-07rufuw5or] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.sd-file-edit-actions[b-07rufuw5or] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Row actions (reveal on hover) ────────────────────────── */
.sd-row-actions[b-07rufuw5or] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 120ms;
}

.sd-icon-btn[b-07rufuw5or] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.sd-icon-btn:hover[b-07rufuw5or] {
    background: var(--surface-2);
    color: var(--text);
}

.sd-icon-btn--danger:hover[b-07rufuw5or] {
    background: var(--red-soft);
    color: var(--red);
}

.sd-icon-btn--active[b-07rufuw5or] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Empty state ──────────────────────────────────────────── */
.sd-empty[b-07rufuw5or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 0;
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

.sd-empty i[b-07rufuw5or] {
    font-size: 26px;
    color: var(--text-4);
}
/* _content/Ilinniarfik/Components/Pages/SyllabusManagement/SyllabusManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/TeacherBlackoutManagement/TeacherBlackoutManagementList.razor.rz.scp.css */
.km-filter-field[b-nelq039sde] { display: flex; flex-direction: column; gap: 4px; }
.km-filter-label[b-nelq039sde] { font-size: 13px; font-weight: 500; color: var(--text-3); }
/* _content/Ilinniarfik/Components/Pages/TeacherManagement/TeacherBookingPage.razor.rz.scp.css */
.tbp-sep[b-smapfhbjsu] {
    width: 1px;
    height: 20px;
    background: #e6e8ed;
    flex-shrink: 0;
}

.tbp-label[b-smapfhbjsu] {
    font-size: 14px;
    font-weight: 600;
    color: #0f1729;
}
/* _content/Ilinniarfik/Components/Pages/TeacherManagement/TeacherManagementDetail.razor.rz.scp.css */

/* _content/Ilinniarfik/Components/Pages/TeacherManagement/TeacherManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Pages/UserManagement/UserManagementDetail.razor.rz.scp.css */
/* ── Role aside ─────────────────────────────────────────────── */
.um-role-assign[b-fm8nxne3d5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.um-role-btn[b-fm8nxne3d5] {
    width: 100%;
    justify-content: center;
}

.um-role-msg[b-fm8nxne3d5] {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
}

.um-role-msg--success[b-fm8nxne3d5] {
    background: var(--green-soft);
    color: var(--green);
}

.um-role-msg--error[b-fm8nxne3d5] {
    background: var(--red-soft);
    color: var(--red);
}

/* ── Role list ──────────────────────────────────────────────── */
.um-role-list[b-fm8nxne3d5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.um-role-row[b-fm8nxne3d5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}

.um-role-row:last-child[b-fm8nxne3d5] {
    border-bottom: none;
}

.um-role-row--inactive[b-fm8nxne3d5] {
    opacity: 0.5;
}

.um-role-info[b-fm8nxne3d5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.um-role-code[b-fm8nxne3d5] {
    font-size: 12px;
    font-weight: 600;
}

.um-role-name[b-fm8nxne3d5] {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-role-badge[b-fm8nxne3d5] {
    margin-top: 2px;
    width: fit-content;
}
/* _content/Ilinniarfik/Components/Pages/UserManagement/UserManagementList.razor.rz.scp.css */
/* _content/Ilinniarfik/Components/Shared/BlackoutImpactDialog.razor.rz.scp.css */
/* A Radzen dialog renders in its own portal and does not reliably inherit app.css's root tokens —
   see the identical note on BookingDialog.razor.css, which this mirrors value for value (same
   palette). Fully self-contained on purpose: no km-* global class is relied on here. */

.bid[b-b3voig8o5z] {
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-hover: #f3f5f8;
    --border: #e6e8ed;
    --border-strong: #d4d8df;
    --text: #0f1729;
    --text-2: #4a5468;
    --text-3: #7a8499;
    --accent: #3b4cca;
    --accent-hover: #2f3eb0;
    --accent-soft: #eef0fc;
    --accent-text: #2733a8;
    --amber: #a25d00;
    --amber-soft: #fbecd0;
    --r-sm: 6px;
    --r: 8px;

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.bid-head[b-b3voig8o5z] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bid-head-icon[b-b3voig8o5z] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--amber-soft);
    color: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
}

.bid-head-text[b-b3voig8o5z] {
    flex: 1;
    min-width: 0;
}

.bid-title[b-b3voig8o5z] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bid-meta[b-b3voig8o5z] {
    font-size: 12.5px;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Body / list ─────────────────────────────────────────────────────────── */

.bid-body[b-b3voig8o5z] {
    padding: 16px 20px 20px;
    overflow-y: auto;
    min-height: 0;
}

.bid-list[b-b3voig8o5z] {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    max-height: 44vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}

.bid-item[b-b3voig8o5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    font-size: 12.5px;
    color: var(--text-2);
}

.bid-item + .bid-item[b-b3voig8o5z] {
    border-top: 1px solid var(--border);
}

.bid-item.is-resolved[b-b3voig8o5z] {
    opacity: 0.6;
}

.bid-item-main[b-b3voig8o5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bid-when[b-b3voig8o5z] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}

.bid-course[b-b3voig8o5z] {
    color: var(--text-2);
}

.bid-location[b-b3voig8o5z] {
    color: var(--text-3);
}

.bid-item-actions[b-b3voig8o5z] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.bid-tag[b-b3voig8o5z] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--text-3);
}

/* ── Footer / buttons ────────────────────────────────────────────────────── */

.bid-foot[b-b3voig8o5z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}

.bid-foot-spacer[b-b3voig8o5z] {
    flex: 1;
}

.bid-btn[b-b3voig8o5z] {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 120ms ease;
}

.bid-btn--sm[b-b3voig8o5z] {
    height: 28px;
    padding: 0 11px;
    font-size: 12.5px;
    border-radius: var(--r-sm);
}

.bid-btn--primary[b-b3voig8o5z] {
    background: var(--accent);
    color: #fff;
}
.bid-btn--primary:hover[b-b3voig8o5z] { background: var(--accent-hover); }

.bid-btn--ghost[b-b3voig8o5z] {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-2);
}
.bid-btn--ghost:hover[b-b3voig8o5z] { background: var(--surface-hover); }
/* _content/Ilinniarfik/Components/Shared/BookingOccurrenceList.razor.rz.scp.css */
/* A term can be thirty lessons, so it scrolls inside its step rather than pushing the footer out of
   reach — the buttons are what the reader is here to press. Tokens come from the hosting dialog. */

.bol[b-61157wakzc] {
    list-style: none;
    margin: 0;
    padding: 8px 12px;
    max-height: 34vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}

.bol-item[b-61157wakzc] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.bol-item + .bol-item[b-61157wakzc] {
    border-top: 1px solid var(--border);
}

/* The occurrence being edited, so it can be found in a list of thirty near-identical lines. */
.bol-item.is-anchor[b-61157wakzc] {
    font-weight: 600;
    color: var(--accent-text);
}

.bol-item.is-blocked .bol-when[b-61157wakzc] {
    text-decoration: line-through;
}

.bol-item.is-blocked[b-61157wakzc] {
    color: var(--red);
}

.bol-tag[b-61157wakzc] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: var(--r-sm);
    background: var(--surface-hover);
    color: var(--text-3);
}

.bol-item.is-anchor .bol-tag[b-61157wakzc] {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.bol-item.is-blocked .bol-tag[b-61157wakzc] {
    background: var(--red-soft);
    color: var(--red);
}
/* _content/Ilinniarfik/Components/Shared/BookingScheduler.razor.rz.scp.css */
/* ── Design tokens ───────────────────────────────────────────── */
.sc-page[b-b5pfb3o6on] {
    --sc-surface: #ffffff;
    --sc-border: #e6e8ed;
    --sc-border-strong: #d4d8df;
    --sc-text: #0f1729;
    --sc-text-2: #4a5468;
    --sc-text-3: #7a8499;
    --sc-text-4: #9ba3b4;
    --sc-accent: #3b4cca;
    --sc-accent-soft: #eef0fc;
    --sc-accent-text: #2733a8;
    /* A meeting is a distinct booking type from a lesson, so it gets its own tone rather than
       sharing the accent — teal, not indigo, so the two read apart on the same grid at a glance. */
    --sc-meeting: #0e8a7a;
    --sc-meeting-soft: #e6f5f2;
    --sc-meeting-text: #0a6459;
    /* Grey means cancelled, and only that. */
    --sc-muted: #9ba3b4;
    --sc-muted-soft: #f1f3f6;
    --sc-muted-text: #5a6478;
    --sc-surface-2: #fafbfc;
    --sc-surface-hover: #f3f5f8;
    --sc-shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
    --sc-shadow: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);
    --sc-r: 8px;

    display: flex;
    flex-direction: column;
    /* .content's own vertical padding, which the margin below bleeds back over. MainLayout's scoped
       rule (24px) wins over app.css's 1.1rem — the old -1.1rem bled the wrong figure. */
    --sc-bleed-y: 24px;

    /* Fill exactly what the layout hands us. `100vh - header` was a guess — the header is 56px, not
       the 64px the fallback assumed — and it ignored the paddings around it, so the shell came out
       slightly too tall and the page scrolled behind it. .content is height: 100%,
       so this resolves against RadzenBody; the added padding is what the negative margins bleed. */
    height: calc(100% + 2 * var(--sc-bleed-y));
    overflow: hidden;

    /* Bleed to the shell's edges: .content's padding vertically, RadzenBody's own horizontally.
       The horizontal figure has to be exactly rz-body's padding — .content has no horizontal
       padding (bootstrap itself is not linked, so its utilities never applied) — because anything
       larger pushes past rz-body's padding box and it scrolls sideways. */
    margin: calc(-1 * var(--sc-bleed-y)) calc(-1 * var(--rz-layout-body-padding, 1rem));
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sc-text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
}

.sc-loading[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 60px;
}

.sc-page-bar[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--sc-surface);
    border-bottom: 1px solid var(--sc-border);
    flex-shrink: 0;
}

.sc-today-btn[b-b5pfb3o6on] {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--sc-r);
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 120ms;
}

.sc-today-btn:hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }

.sc-nav-btn[b-b5pfb3o6on] {
    width: 34px;
    height: 34px;
    border-radius: var(--sc-r);
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    color: var(--sc-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms;
}

.sc-nav-btn:hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }

.sc-range-label[b-b5pfb3o6on] {
    font-size: 16px;
    font-weight: 600;
    color: var(--sc-text);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-week-badge[b-b5pfb3o6on] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sc-text-3);
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.sc-spacer[b-b5pfb3o6on] { flex: 1; }

.sc-view-toggle[b-b5pfb3o6on] {
    display: flex;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-r);
    padding: 2px;
}

.sc-view-opt[b-b5pfb3o6on] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-text-3);
    cursor: pointer;
    user-select: none;
}

.sc-view-opt-active[b-b5pfb3o6on] {
    background: var(--sc-surface);
    color: var(--sc-text);
    box-shadow: var(--sc-shadow-sm);
}

.sc-body[b-b5pfb3o6on] {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.sc-rail[b-b5pfb3o6on] {
    width: 280px;
    flex-shrink: 0;
    background: var(--sc-surface);
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sc-rail-section[b-b5pfb3o6on] {
    padding: 18px;
}

.sc-rail-section + .sc-rail-section[b-b5pfb3o6on] {
    border-top: 1px solid var(--sc-border);
}

.sc-rail-title[b-b5pfb3o6on] {
    font-size: 11px;
    font-weight: 600;
    color: var(--sc-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.sc-month-head[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sc-month-name[b-b5pfb3o6on] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sc-text);
    letter-spacing: -0.01em;
}

.sc-month-nav[b-b5pfb3o6on] {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.sc-month-nav-btn[b-b5pfb3o6on] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--sc-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 100ms;
}

.sc-month-nav-btn:hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }

.sc-month-grid[b-b5pfb3o6on] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.sc-month-dow[b-b5pfb3o6on] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc-text-3);
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
}

.sc-month-cell[b-b5pfb3o6on] {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--sc-text-2);
    cursor: pointer;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    position: relative;
    transition: background 100ms, color 100ms;
    user-select: none;
}

.sc-month-cell:not(.is-today):hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }

.sc-month-cell.in-week[b-b5pfb3o6on] {
    background: var(--sc-accent-soft);
    color: var(--sc-accent-text);
    border-radius: 0;
}

.sc-month-cell.in-week.week-start[b-b5pfb3o6on] {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.sc-month-cell.in-week.week-end[b-b5pfb3o6on] {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.sc-month-cell.other-month[b-b5pfb3o6on] { color: var(--sc-text-4); }

/* Sits under the number inside the cell, which is already position:relative. Small enough to read
   as a density hint rather than a badge — the question it answers is "is this month busy", not
   "how many". */
.sc-month-dot[b-b5pfb3o6on] {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sc-text-4);
    pointer-events: none;
}

.sc-month-cell.other-month .sc-month-dot[b-b5pfb3o6on] { opacity: 0.5; }

/* On a filled cell the grey would go muddy, so the dot borrows that cell's own foreground —
   accent text on the selected week's soft band, white inside today's solid circle. */
.sc-month-cell.in-week .sc-month-dot[b-b5pfb3o6on] { background: var(--sc-accent-text); }
.sc-month-cell.is-today .sc-month-dot[b-b5pfb3o6on] { background: #fff; }

.sc-month-cell.is-today[b-b5pfb3o6on] {
    background: var(--sc-accent) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 50% !important;
}

.sc-planner[b-b5pfb3o6on] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--sc-surface);
}

.sc-day-header[b-b5pfb3o6on] {
    display: grid;
    border-bottom: 1px solid var(--sc-border);
    flex-shrink: 0;
    background: var(--sc-surface);
}

.sc-hour-gutter-head[b-b5pfb3o6on] {
    width: 64px;
    border-right: 1px solid var(--sc-border);
    flex-shrink: 0;
}

.sc-day-head-cell[b-b5pfb3o6on] {
    padding: 12px 14px 14px;
    border-right: 1px solid var(--sc-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sc-day-head-last[b-b5pfb3o6on] { border-right: none; }

.sc-today-head[b-b5pfb3o6on] {
    background: linear-gradient(180deg, var(--sc-accent-soft) 0%, transparent 100%);
}

.sc-day-dow[b-b5pfb3o6on] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sc-day-num[b-b5pfb3o6on] {
    font-size: 22px;
    font-weight: 600;
    color: var(--sc-text);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sc-day-num-today[b-b5pfb3o6on] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sc-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sc-today-pill[b-b5pfb3o6on] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sc-grid-wrap[b-b5pfb3o6on] {
    flex: 1;
    overflow: auto;
    position: relative;
}

.sc-grid-inner[b-b5pfb3o6on] {
    position: relative;
    display: grid;
}

.sc-hour-gutter[b-b5pfb3o6on] {
    border-right: 1px solid var(--sc-border);
    background: var(--sc-surface);
    position: sticky;
    left: 0;
    z-index: 2;
}

.sc-hour-slot[b-b5pfb3o6on] {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.sc-hour-label[b-b5pfb3o6on] {
    font-size: 11px;
    color: var(--sc-text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0 10px;
    margin-top: -6px;
    white-space: nowrap;
    width: 100%;
}

.sc-day-col[b-b5pfb3o6on] {
    border-right: 1px solid var(--sc-border);
    position: relative;
}

.sc-day-col-last[b-b5pfb3o6on] { border-right: none; }
.sc-day-col-today[b-b5pfb3o6on] { background: rgba(59, 76, 202, 0.025); }

.sc-event[b-b5pfb3o6on] {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 6px;
    padding: 5px 8px 5px 10px;
    overflow: hidden;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 1px;
    box-shadow: var(--sc-shadow-sm);
    transition: transform 100ms, box-shadow 120ms;
}

.sc-event:hover[b-b5pfb3o6on] {
    transform: translateY(-1px);
    box-shadow: var(--sc-shadow);
}

/* A cancelled lesson stays on the calendar — people need to see that the slot they remember is off,
   and a notification linking here has to land on something. It reads as struck through and faded so
   it can't be mistaken for teaching that is still going ahead. */
.sc-event-rail[b-b5pfb3o6on] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* The recurring badge, top-right of the card. Absolutely positioned so it never joins the flex
   column and pushes the title around, and the card is already position:absolute, so this anchors
   to it. It inherits the event's own text colour inline, which keeps it legible on both the indigo
   and the muted-cancelled backgrounds without a second palette. */
.sc-event-repeat[b-b5pfb3o6on] {
    position: absolute;
    top: 3px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0.85;
    pointer-events: none;
}

.sc-event-repeat .rzi[b-b5pfb3o6on] {
    font-size: 12px;
    line-height: 1;
}

.sc-event--wide .sc-event-repeat[b-b5pfb3o6on] {
    top: 6px;
    right: 8px;
}

/* Reserve the corner so a long title runs out of room before it runs under the badge, rather than
   the badge sitting on top of readable text. */
.sc-event--series .sc-event-title[b-b5pfb3o6on],
.sc-event--series .sc-event-time[b-b5pfb3o6on] {
    padding-right: 15px;
}

.sc-event--wide.sc-event--series .sc-event-time[b-b5pfb3o6on],
.sc-event--wide.sc-event--series .sc-event-title[b-b5pfb3o6on] {
    padding-right: 0;
}

.sc-event--wide.sc-event--series .sc-event-wide-body[b-b5pfb3o6on] {
    padding-right: 20px;
}

.sc-event-time[b-b5pfb3o6on] {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, monospace;
    opacity: 0.85;
}

.sc-event-title[b-b5pfb3o6on] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-event-sub[b-b5pfb3o6on] {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-now-line[b-b5pfb3o6on] {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 4;
}

.sc-now-dot[b-b5pfb3o6on] {
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc-accent);
    border: 2px solid var(--sc-surface);
}

.sc-now-bar[b-b5pfb3o6on] {
    height: 1.5px;
    background: var(--sc-accent);
    box-shadow: 0 0 0 0.5px var(--sc-accent);
}

/* ── Blackout bands in day columns ───────────────────────────── */
.sc-blackout-band[b-b5pfb3o6on] {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.sc-blackout-band-teacher[b-b5pfb3o6on] {
    background: rgba(124, 58, 237, 0.08);
    border-left-color: #7c3aed;
}

.sc-blackout-band-education[b-b5pfb3o6on] {
    background: rgba(13, 148, 136, 0.08);
    border-left-color: #0d9488;
}

.sc-blackout-label[b-b5pfb3o6on] {
    font-size: 10px;
    color: #9f1212;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.sc-blackout-label-teacher[b-b5pfb3o6on] {
    color: #5b21b6;
}

.sc-blackout-label-education[b-b5pfb3o6on] {
    color: #0f766e;
}

/* Cancelled lessons stay on the grid, struck through — mirrors CalendarDashboard.
   The subtitle is struck too: with the colour drained out, the strike is what carries the
   "this is off" at a glance, so it should cover the whole block rather than the title alone. */
.sc-event--cancelled .sc-event-title[b-b5pfb3o6on],
.sc-event--cancelled .sc-event-time[b-b5pfb3o6on],
.sc-event--cancelled .sc-event-sub[b-b5pfb3o6on] {
    text-decoration: line-through;
}

/* The hatch needs background-image, so the event's inline colour must be set with
   background-COLOR — the `background` shorthand resets background-image, and an inline style beats
   this rule, which is why these stripes never once appeared. */
.sc-event--cancelled[b-b5pfb3o6on] {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(15, 23, 41, 0.05) 0 6px,
        transparent 6px 12px
    );
}

.sc-event-cancelled[b-b5pfb3o6on] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ── Day view header + wide event card ───────────────────────────────────────
   Day view has one column instead of seven, so the header spreads out into a row
   and the event card does the same: the time gets its own mono column instead of
   being stacked above a cramped title. */

.sc-day-head-cell--wide[b-b5pfb3o6on] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.sc-day-num-today--lg[b-b5pfb3o6on] {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.sc-day-long[b-b5pfb3o6on] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-text);
    letter-spacing: -0.01em;
}

.sc-day-full[b-b5pfb3o6on] { font-size: 12px; color: var(--sc-text-3); }
.sc-day-count[b-b5pfb3o6on] { font-size: 12px; color: var(--sc-text-3); }

.sc-event--wide[b-b5pfb3o6on] {
    left: 8px;
    right: 8px;
    padding: 8px 12px 8px 14px;
    flex-direction: row;
    gap: 14px;
}

.sc-event-time--wide[b-b5pfb3o6on] {
    flex-shrink: 0;
    width: 96px;
    font-size: 11.5px;
    opacity: 0.9;
}

.sc-event-wide-body[b-b5pfb3o6on] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* Sits over the first few hours rather than centred in the whole column — a message
   pinned to 13:00 in an empty day reads as if something were there. */
.sc-day-empty[b-b5pfb3o6on] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.sc-day-empty-title[b-b5pfb3o6on] { font-size: 13.5px; font-weight: 600; color: var(--sc-text-3); }
.sc-day-empty-sub[b-b5pfb3o6on] { font-size: 12.5px; color: var(--sc-text-4); }

/* ── Month view ──────────────────────────────────────────────────────────────
   Whole Monday-start weeks. The week-number gutter matches the mini-month's role in
   the rail: it is how people here refer to a week ("uge 21"), not decoration. */

.sc-month[b-b5pfb3o6on] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--sc-surface);
    overflow: hidden;
}

.sc-month-dow-row[b-b5pfb3o6on] {
    display: grid;
    grid-template-columns: 34px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--sc-border);
}

.sc-month-weekno-head[b-b5pfb3o6on] {
    border-right: 1px solid var(--sc-border);
    background: var(--sc-surface-2);
}

.sc-month-dow-cell[b-b5pfb3o6on] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 9px 12px;
    border-right: 1px solid var(--sc-border);
}

.sc-month-dow-cell-last[b-b5pfb3o6on] { border-right: none; }

.sc-month-body[b-b5pfb3o6on] { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }

.sc-month-week[b-b5pfb3o6on] {
    flex: 1;
    min-height: 142px;
    display: flex;
    border-bottom: 1px solid var(--sc-border);
}

.sc-month-weekno[b-b5pfb3o6on] {
    width: 34px;
    flex-shrink: 0;
    border-right: 1px solid var(--sc-border);
    background: var(--sc-surface-2);
    display: flex;
    justify-content: center;
    padding-top: 9px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc-text-4);
    font-variant-numeric: tabular-nums;
}

.sc-month-grid-row[b-b5pfb3o6on] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: relative;
    min-width: 0;
}

.sc-month-cell[b-b5pfb3o6on] {
    border-right: 1px solid var(--sc-border);
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background 100ms;
}

.sc-month-cell-last[b-b5pfb3o6on] { border-right: none; }
.sc-month-cell--out[b-b5pfb3o6on] { background: var(--sc-surface-2); }
.sc-month-cell--weekend[b-b5pfb3o6on] { background: var(--sc-surface-2); }
.sc-month-cell--today[b-b5pfb3o6on] { background: rgba(59, 76, 202, 0.03); }
.sc-month-cell:hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }

.sc-month-date-row[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    padding-left: 2px;
}

.sc-month-date[b-b5pfb3o6on] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sc-text-2);
    font-variant-numeric: tabular-nums;
}

.sc-month-date--muted[b-b5pfb3o6on] { color: var(--sc-text-4); font-weight: 500; }

.sc-month-date-today[b-b5pfb3o6on] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sc-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    margin-left: -2px;
}

.sc-month-chip[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11.5px;
    line-height: 1.4;
    min-width: 0;
    cursor: pointer;
}

/* Struck across the time as well, matching the week card — a month chip is small enough that a
   strike over only half of it reads as a rendering glitch. */
.sc-month-chip--cancelled .sc-month-chip-title[b-b5pfb3o6on],
.sc-month-chip--cancelled .sc-month-chip-time[b-b5pfb3o6on] { text-decoration: line-through; }
.sc-month-chip-dot[b-b5pfb3o6on] { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.sc-month-chip-time[b-b5pfb3o6on] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.sc-month-chip-title[b-b5pfb3o6on] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.sc-month-more[b-b5pfb3o6on] {
    font-size: 11px;
    font-weight: 600;
    color: var(--sc-text-3);
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* The spanning-bar layer floats over the cells, offset past the date row. Bars are the
   date_range blackouts — an exam week reads as one bar rather than five identical
   bands you have to notice separately. */
.sc-month-bar-layer[b-b5pfb3o6on] {
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px 0;
    pointer-events: none;
}

.sc-month-bar[b-b5pfb3o6on] {
    height: 19px;
    border-radius: 4px;
    margin: 0 4px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 8px 0 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
    background: #fde7e3;
    color: #92100f;
    box-shadow: inset 3px 0 0 #dc2626;
}

.sc-month-bar--teacher[b-b5pfb3o6on] {
    background: #f3e8ff;
    color: #5b21b6;
    box-shadow: inset 3px 0 0 #7c3aed;
}

.sc-month-bar--education[b-b5pfb3o6on] {
    background: #ccfbf1;
    color: #0f766e;
    box-shadow: inset 3px 0 0 #0d9488;
}

/* ── Perspective card ────────────────────────────────────────────────────────
   What the calendar is read from. A card rather than a dropdown because the name
   and its qualifier both matter — "Lokale 204" alone does not say which building. */

.sc-persp-card[b-b5pfb3o6on] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--sc-r);
    border: 1px solid var(--sc-border-strong);
    background: var(--sc-surface);
    box-shadow: var(--sc-shadow-sm);
    text-align: left;
    cursor: pointer;
}

.sc-persp-card:hover[b-b5pfb3o6on] { background: var(--sc-surface-hover); }
.sc-persp-card--empty[b-b5pfb3o6on] { border-style: dashed; }

/* The letter-on-colour square that says which kind of thing this is. */
.sc-persp-chip[b-b5pfb3o6on] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.sc-persp-text[b-b5pfb3o6on] { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.sc-persp-name[b-b5pfb3o6on] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-text);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-persp-meta[b-b5pfb3o6on] {
    font-size: 11.5px;
    color: var(--sc-text-3);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-persp-chev[b-b5pfb3o6on] { color: var(--sc-text-4); font-size: 16px; flex-shrink: 0; }

/* ── Booking type ────────────────────────────────────────────────────────────
   One row today. Built as a list so the second type costs markup, not a rethink. */

.sc-type-row[b-b5pfb3o6on] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
    cursor: pointer;
}

.sc-type-check[b-b5pfb3o6on] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--sc-border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-type-label[b-b5pfb3o6on] { flex: 1; min-width: 0; }

.sc-type-count[b-b5pfb3o6on] {
    font-size: 11.5px;
    color: var(--sc-text-4);
    font-variant-numeric: tabular-nums;
}
/* _content/Ilinniarfik/Components/Shared/BookingScopePicker.razor.rz.scp.css */
/* Rendered inside the booking dialog, which redeclares the app's tokens on .bd — these inherit
   them rather than defining their own, so the picker matches whatever surface hosts it. */

.bsp[b-z8znhhdyls] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bsp-option[b-z8znhhdyls] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
}

.bsp-option:hover[b-z8znhhdyls] {
    background: var(--surface-hover);
}

.bsp-option.is-selected[b-z8znhhdyls] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.bsp-option input[b-z8znhhdyls] {
    margin: 2px 0 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.bsp-body[b-z8znhhdyls] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bsp-label[b-z8znhhdyls] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.bsp-option.is-selected .bsp-label[b-z8znhhdyls] {
    color: var(--accent-text);
    font-weight: 600;
}

.bsp-detail[b-z8znhhdyls] {
    font-size: 11.5px;
    color: var(--text-3);
}

.bsp-option.is-selected .bsp-detail[b-z8znhhdyls] {
    color: var(--accent-text);
    opacity: 0.8;
}
/* _content/Ilinniarfik/Components/Shared/CalendarDashboard.razor.rz.scp.css */
/* Calendar dashboard — day timeline + week strip + summary rail. */

.cd-page[b-pqldpdi3kn] {
    --cd-surface: #ffffff;
    --cd-surface-2: #fafbfc;
    --cd-surface-hover: #f3f5f8;
    --cd-border: #e6e8ed;
    --cd-border-strong: #d4d8df;
    --cd-text: #0f1729;
    --cd-text-2: #4a5468;
    --cd-text-3: #7a8499;
    --cd-text-4: #9ba3b4;
    --cd-accent: #3b4cca;
    --cd-accent-hover: #2f3eb0;
    --cd-accent-soft: #eef0fc;
    --cd-accent-text: #2733a8;
    --cd-red: #b42318;
    --cd-r-sm: 6px;
    --cd-r: 8px;
    --cd-r-lg: 12px;
    --cd-shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
    --cd-shadow: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);
    --cd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    display: flex;
    flex-direction: column;
    /* .content's own vertical padding, which the margin below bleeds back over. MainLayout's scoped
       rule (24px) wins over app.css's 1.1rem — the old -1.1rem bled the wrong figure. */
    --cd-bleed-y: 24px;

    /* Fill exactly what the layout hands us. `100vh - header` was a guess — the header is 56px, not
       the 64px the fallback assumed — and it ignored the paddings around it, so the shell came out
       slightly too tall and the page scrolled behind it. .content is height: 100%,
       so this resolves against RadzenBody; the added padding is what the negative margins bleed. */
    height: calc(100% + 2 * var(--cd-bleed-y));
    overflow: hidden;

    /* Bleed to the shell's edges: .content's padding vertically, RadzenBody's own horizontally.
       The horizontal figure has to be exactly rz-body's padding — .content has no horizontal
       padding (bootstrap itself is not linked, so its utilities never applied) — because anything
       larger pushes past rz-body's padding box and it scrolls sideways. */
    margin: calc(-1 * var(--cd-bleed-y)) calc(-1 * var(--rz-layout-body-padding, 1rem));
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cd-text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01", "ss03";
}

.cd-loading[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 60px;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.cd-bar[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cd-ghost[b-pqldpdi3kn] {
    height: 34px;
    padding: 0 13px;
    border-radius: var(--cd-r);
    border: 1px solid var(--cd-border);
    background: var(--cd-surface);
    color: var(--cd-text-2);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms;
}

.cd-ghost:hover[b-pqldpdi3kn] {
    background: var(--cd-surface-hover);
    color: var(--cd-text-2);
    text-decoration: none;
}

.cd-icon-btn[b-pqldpdi3kn] {
    width: 34px;
    height: 34px;
    border-radius: var(--cd-r);
    border: 1px solid var(--cd-border);
    background: var(--cd-surface);
    color: var(--cd-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms;
}

.cd-icon-btn:hover[b-pqldpdi3kn] { background: var(--cd-surface-hover); }

.cd-primary[b-pqldpdi3kn] {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: var(--cd-r);
    background: var(--cd-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 120ms;
}

.cd-primary:hover[b-pqldpdi3kn] { background: var(--cd-accent-hover); }

.cd-date-label[b-pqldpdi3kn] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-today-marker[b-pqldpdi3kn] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cd-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cd-week-badge[b-pqldpdi3kn] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cd-text-3);
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.cd-spacer[b-pqldpdi3kn] { flex: 1; }

/* ── Body layout ──────────────────────────────────────────────── */
.cd-body[b-pqldpdi3kn] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 0;
}

.cd-center[b-pqldpdi3kn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--cd-surface);
}

/* ── Week strip ───────────────────────────────────────────────── */
.cd-strip[b-pqldpdi3kn] {
    display: grid;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cd-border);
    background: var(--cd-surface-2);
    flex-shrink: 0;
}

.cd-day-card[b-pqldpdi3kn] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 11px 10px;
    border-radius: var(--cd-r);
    text-align: left;
    border: 1px solid var(--cd-border);
    background: var(--cd-surface);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
}

.cd-day-card:hover[b-pqldpdi3kn] { background: var(--cd-surface-hover); }

.cd-day-card--today[b-pqldpdi3kn] { background: var(--cd-accent-soft); }
.cd-day-card--today:hover[b-pqldpdi3kn] { background: var(--cd-accent-soft); }

.cd-day-card--on[b-pqldpdi3kn] {
    border-color: var(--cd-accent);
    background: var(--cd-surface);
    box-shadow: var(--cd-shadow);
}

.cd-day-card--on:hover[b-pqldpdi3kn] { background: var(--cd-surface); }

.cd-day-card-top[b-pqldpdi3kn] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.cd-dow[b-pqldpdi3kn] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cd-text-3);
}

.cd-dnum[b-pqldpdi3kn] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text);
    margin-left: auto;
}

.cd-dnum--today[b-pqldpdi3kn] { color: var(--cd-accent-text); }

.cd-load-bars[b-pqldpdi3kn] {
    display: flex;
    gap: 3px;
    height: 4px;
}

.cd-load-bar[b-pqldpdi3kn] {
    flex: 1;
    border-radius: 999px;
}

.cd-load-bar--empty[b-pqldpdi3kn] { background: var(--cd-surface-hover); }

.cd-load-count[b-pqldpdi3kn] {
    font-size: 11.5px;
    color: var(--cd-text-3);
    font-variant-numeric: tabular-nums;
}

/* ── All-day chips ────────────────────────────────────────────── */
.cd-allday[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--cd-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cd-allday-label[b-pqldpdi3kn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cd-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 48px;
    flex-shrink: 0;
}

.cd-allday-chip[b-pqldpdi3kn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fde7e3;
    color: #92100f;
    font-size: 12px;
    font-weight: 500;
}

/* ── Day timeline ─────────────────────────────────────────────── */
.cd-grid-wrap[b-pqldpdi3kn] {
    flex: 1;
    overflow-y: auto;
    position: relative;
    min-height: 0;
}

.cd-grid-inner[b-pqldpdi3kn] {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
}

.cd-gutter[b-pqldpdi3kn] { border-right: 1px solid var(--cd-border); }

.cd-hour-label[b-pqldpdi3kn] {
    font-size: 11px;
    color: var(--cd-text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0 10px;
    margin-top: -6px;
    font-family: var(--cd-mono);
}

.cd-track[b-pqldpdi3kn] { position: relative; }

.cd-hour-rule[b-pqldpdi3kn] {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--cd-border);
}

.cd-half-rule[b-pqldpdi3kn] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--cd-border);
}

.cd-ev[b-pqldpdi3kn] {
    position: absolute;
    left: 10px;
    right: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--cd-shadow-sm);
    cursor: pointer;
    transition: transform 100ms, box-shadow 120ms;
    display: flex;
}

.cd-ev:hover[b-pqldpdi3kn] {
    transform: translateY(-1px);
    box-shadow: var(--cd-shadow);
}

.cd-ev--tall[b-pqldpdi3kn] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 12px 8px 14px;
}

.cd-ev--short[b-pqldpdi3kn] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 14px;
}

.cd-ev-rail[b-pqldpdi3kn] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.cd-ev-time[b-pqldpdi3kn] {
    font-size: 11px;
    font-family: var(--cd-mono);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    flex-shrink: 0;
}

.cd-ev-title[b-pqldpdi3kn] {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.cd-ev-meta[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    opacity: 0.8;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.cd-ev-meta-item[b-pqldpdi3kn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cd-ev-meta-sub[b-pqldpdi3kn] {
    display: block;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Now line ─────────────────────────────────────────────────── */
.cd-now[b-pqldpdi3kn] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
}

.cd-now-dot[b-pqldpdi3kn] {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cd-accent);
    border: 2px solid var(--cd-surface);
}

.cd-now-bar[b-pqldpdi3kn] {
    height: 1.5px;
    background: var(--cd-accent);
}

.cd-now-time[b-pqldpdi3kn] {
    position: absolute;
    right: 8px;
    top: -9px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--cd-mono);
    color: #fff;
    background: var(--cd-accent);
    border-radius: 999px;
    padding: 1px 7px;
}

/* ── Rail ─────────────────────────────────────────────────────── */
.cd-rail[b-pqldpdi3kn] {
    border-left: 1px solid var(--cd-border);
    background: var(--cd-surface-2);
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.cd-card[b-pqldpdi3kn] {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-r-lg);
    box-shadow: var(--cd-shadow-sm);
    padding: 16px;
    flex-shrink: 0;
}

.cd-card--accent[b-pqldpdi3kn] { border-color: var(--cd-accent); }

.cd-card-title[b-pqldpdi3kn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cd-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-card-count[b-pqldpdi3kn] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--cd-text-3);
    text-transform: none;
    letter-spacing: 0;
}

.cd-countdown[b-pqldpdi3kn] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cd-accent-text);
    background: var(--cd-accent-soft);
    border-radius: 999px;
    padding: 3px 9px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

.cd-next-title[b-pqldpdi3kn] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-top: 10px;
}

.cd-next-empty[b-pqldpdi3kn] {
    margin-top: 10px;
    font-size: 14px;
    color: var(--cd-text-3);
}

.cd-next-meta[b-pqldpdi3kn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--cd-text-2);
}

.cd-next-meta span[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cd-stat-row[b-pqldpdi3kn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.cd-stat[b-pqldpdi3kn] {
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-r);
    padding: 9px 11px;
}

.cd-stat-num[b-pqldpdi3kn] {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.cd-stat-num--red[b-pqldpdi3kn] { color: var(--cd-red); }

.cd-stat-lbl[b-pqldpdi3kn] {
    font-size: 11px;
    color: var(--cd-text-3);
    margin-top: 1px;
}

.cd-task-list[b-pqldpdi3kn] { margin-top: 4px; }

.cd-task-row[b-pqldpdi3kn] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--cd-border);
}

.cd-task-row--first[b-pqldpdi3kn] { border-top: none; }

.cd-task-box[b-pqldpdi3kn] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1.5px solid var(--cd-border-strong);
    flex-shrink: 0;
    margin-top: 2px;
}

.cd-task-text[b-pqldpdi3kn] {
    min-width: 0;
    flex: 1;
}

.cd-task-title[b-pqldpdi3kn] {
    font-size: 13px;
    color: var(--cd-text);
    line-height: 1.4;
}

.cd-task-meta[b-pqldpdi3kn] {
    font-size: 11.5px;
    color: var(--cd-text-3);
    margin-top: 2px;
}

.cd-task-due[b-pqldpdi3kn] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cd-text-3);
    white-space: nowrap;
    margin-left: auto;
}

.cd-task-due--urgent[b-pqldpdi3kn] { color: var(--cd-red); }

/* Marks the card above as sample content rather than real data. */
.cd-placeholder-note[b-pqldpdi3kn] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--cd-border);
    font-size: 11px;
    color: var(--cd-text-4);
    font-style: italic;
}

/* ── Narrow ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .cd-body[b-pqldpdi3kn] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .cd-rail[b-pqldpdi3kn] {
        border-left: none;
        border-top: 1px solid var(--cd-border);
        max-height: 40vh;
    }
}

/* ── Event detail popup ───────────────────────────────────────── */
.cd-scrim[b-pqldpdi3kn] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 41, 0.34);
    z-index: 60;
}

.cd-modal[b-pqldpdi3kn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 86vh;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-r-lg);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 41, 0.18), 0 4px 12px -4px rgba(15, 23, 41, 0.08);
    z-index: 61;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cd-modal:focus[b-pqldpdi3kn] { outline: none; }

.cd-m-head[b-pqldpdi3kn] {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--cd-border);
    position: relative;
}

.cd-m-rail[b-pqldpdi3kn] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.cd-m-badges[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 34px;
    min-height: 22px;
}

.cd-m-live[b-pqldpdi3kn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--cd-surface);
    color: #0f7a4d;
    font-size: 11px;
    font-weight: 600;
}

.cd-m-live-dot[b-pqldpdi3kn] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cd-m-past[b-pqldpdi3kn] {
    font-size: 11.5px;
    opacity: 0.7;
}

.cd-m-title[b-pqldpdi3kn] {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 9px;
    line-height: 1.25;
}

.cd-m-sub[b-pqldpdi3kn] {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 3px;
}

.cd-m-close[b-pqldpdi3kn] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-2);
    background: var(--cd-surface);
    cursor: pointer;
    transition: background 120ms;
}

.cd-m-close:hover[b-pqldpdi3kn] { background: var(--cd-surface-hover); }

.cd-m-body[b-pqldpdi3kn] {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-m-row[b-pqldpdi3kn] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.cd-m-row-icon[b-pqldpdi3kn] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    color: var(--cd-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.cd-m-row-text[b-pqldpdi3kn] { min-width: 0; flex: 1; }

.cd-m-key[b-pqldpdi3kn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cd-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cd-m-val[b-pqldpdi3kn] {
    font-size: 13.5px;
    color: var(--cd-text);
    margin-top: 2px;
}

.cd-m-val-muted[b-pqldpdi3kn] {
    font-size: 12.5px;
    color: var(--cd-text-3);
    margin-top: 1px;
}

.cd-m-person[b-pqldpdi3kn] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 5px;
}

.cd-m-avatar[b-pqldpdi3kn] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-m-person-text[b-pqldpdi3kn] { min-width: 0; }

.cd-m-person-name[b-pqldpdi3kn] {
    display: block;
    font-size: 13.5px;
    color: var(--cd-text);
}

.cd-m-person-mail[b-pqldpdi3kn] {
    display: block;
    font-size: 12px;
    color: var(--cd-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-m-foot[b-pqldpdi3kn] {
    display: flex;
    gap: 8px;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--cd-border);
    background: var(--cd-surface-2);
}


/* ── Cancelled lessons ─────────────────────────────────────────────────────
   A cancelled lesson keeps its slot and its room colour, struck through and
   dimmed. Removing it would restore the unexplained gap in the week that the
   cancel flow exists to replace. */

.cd-ev--cancelled .cd-ev-title[b-pqldpdi3kn],
.cd-ev--cancelled .cd-ev-time[b-pqldpdi3kn] {
    text-decoration: line-through;
}

.cd-ev--cancelled[b-pqldpdi3kn] {
    /* Hatching reads as "not happening" even for someone who can't perceive the
       strike-through at this size, and survives the room-colour background. */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.06) 0 6px,
        transparent 6px 12px
    );
}

.cd-ev-cancelled-tag[b-pqldpdi3kn] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.85;
}

.cd-m-cancelled[b-pqldpdi3kn] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.14);
}

.cd-m-row--cancelled .cd-m-val[b-pqldpdi3kn] {
    font-weight: 600;
}

/* ── History timeline ──────────────────────────────────────────────────────*/

.cd-m-timeline[b-pqldpdi3kn] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--cd-line, rgba(0, 0, 0, 0.1));
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* A long-running series accumulates entries; keep the modal a fixed shape. */
    max-height: 260px;
    overflow-y: auto;
}

.cd-m-timeline-item[b-pqldpdi3kn] {
    position: relative;
}

.cd-m-timeline-item[b-pqldpdi3kn]::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cd-text-3);
}

.cd-m-timeline-head[b-pqldpdi3kn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cd-m-timeline-what[b-pqldpdi3kn] {
    font-size: 13px;
    font-weight: 600;
}

.cd-m-timeline-when[b-pqldpdi3kn],
.cd-m-timeline-who[b-pqldpdi3kn] {
    font-size: 12px;
    color: var(--cd-text-3);
}

.cd-m-timeline-reason[b-pqldpdi3kn] {
    font-size: 12.5px;
    margin-top: 2px;
}

.cd-m-timeline-changes[b-pqldpdi3kn] {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--cd-text-3);
    font-variant-numeric: tabular-nums;
}

/* A stand-in covering one lesson, distinguished from the module's own teachers. */
.cd-m-sub-tag[b-pqldpdi3kn] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--cd-accent-soft, #eef0fc);
    color: var(--cd-accent-text, #2733a8);
    vertical-align: middle;
}
/* _content/Ilinniarfik/Components/Shared/EnrollmentStatusPanel.razor.rz.scp.css */
/* Scoped to the panel, not to the page it sits on: it renders inside both the student detail card
   and the enrollment dialog, and the host page's own .km-enrollment-status rule can't reach a child
   component's markup anyway. */
.km-enrollment-status[b-yj7be0k1u4] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.km-status-timeline[b-yj7be0k1u4] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.km-status-entry[b-yj7be0k1u4] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* A dated-ahead entry is a plan, not a fact. Dashed, so it reads as provisional at a glance rather
   than only via its badge. */
.km-status-entry--scheduled[b-yj7be0k1u4] {
    border-left-style: dashed;
    border-left-color: var(--amber, #d08700);
    background: none;
}

.km-status-entry-head[b-yj7be0k1u4] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.km-status-entry-name[b-yj7be0k1u4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
}

.km-status-entry-date[b-yj7be0k1u4] {
    font-size: 12px;
    color: var(--text-3);
}

.km-status-entry-meta[b-yj7be0k1u4] {
    font-size: 11.5px;
    color: var(--text-4);
}

.km-status-entry-note[b-yj7be0k1u4] {
    font-size: 12.5px;
    color: var(--text-2);
    white-space: pre-wrap;
}

.km-status-entry-actions[b-yj7be0k1u4] {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.km-toggle-link--danger[b-yj7be0k1u4] {
    color: var(--red, #c0392b);
}
/* _content/Ilinniarfik/Components/Shared/Export/KmExportDialog.razor.rz.scp.css */
/* Export dialog. Renders inside a Radzen dialog (body-level), so the design tokens are declared here
   rather than inherited from a page. */
.kxd[b-g6otlisme4] {
    --kxd-surface: #ffffff;
    --kxd-surface-2: #fafbfc;
    --kxd-hover: #f3f5f8;
    --kxd-border: #e6e8ed;
    --kxd-border-strong: #d4d8df;
    --kxd-text: #0f1729;
    --kxd-text-2: #4a5468;
    --kxd-text-3: #7a8499;
    --kxd-text-4: #9ba3b4;
    --kxd-accent: #3b4cca;
    --kxd-accent-soft: #eef0fc;
    --kxd-accent-text: #2733a8;
    --kxd-green: #0f7a4d;
    --kxd-amber: #a25d00;
    --kxd-amber-soft: #fbecd0;
    --kxd-r: 8px;
    font-size: 13.5px;
    color: var(--kxd-text);
    display: flex;
    flex-direction: column;
    margin: -16px;
    max-height: 82vh;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.kxd-head[b-g6otlisme4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--kxd-border);
}

.kxd-head-icon[b-g6otlisme4] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--kxd-accent-soft);
    color: var(--kxd-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kxd-title[b-g6otlisme4] { font-size: 15px; font-weight: 600; }
.kxd-sub[b-g6otlisme4] { font-size: 12.5px; color: var(--kxd-text-3); margin-top: 1px; }

/* ── Body ───────────────────────────────────────────────────────────── */
.kxd-body[b-g6otlisme4] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kxd-section-label[b-g6otlisme4],
.kxd-section-head .kxd-section-label[b-g6otlisme4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--kxd-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.kxd-section-head[b-g6otlisme4] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.kxd-section-head .kxd-section-label[b-g6otlisme4] { margin-bottom: 0; }
.kxd-count[b-g6otlisme4] { font-size: 11.5px; color: var(--kxd-text-3); margin-left: 8px; }
.kxd-linkbtn[b-g6otlisme4] { margin-left: auto; font-size: 12px; color: var(--kxd-accent-text); font-weight: 500; background: none; border: none; cursor: pointer; }

/* ── Format cards ───────────────────────────────────────────────────── */
.kxd-formats[b-g6otlisme4] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.kxd-format[b-g6otlisme4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px;
    border-radius: var(--kxd-r);
    text-align: left;
    border: 1px solid var(--kxd-border);
    background: var(--kxd-surface);
    cursor: pointer;
}

.kxd-format--on[b-g6otlisme4] { border-color: var(--kxd-accent); background: var(--kxd-accent-soft); box-shadow: 0 0 0 2px var(--kxd-accent-soft); }

.kxd-format-badge[b-g6otlisme4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border-radius: 5px;
    font-family: ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
}

.kxd-format-name[b-g6otlisme4] { font-size: 13px; font-weight: 600; }
.kxd-format-desc[b-g6otlisme4] { font-size: 11px; color: var(--kxd-text-3); line-height: 1.35; }

/* ── Scope ──────────────────────────────────────────────────────────── */
.kxd-scopes[b-g6otlisme4] { display: flex; flex-direction: column; gap: 6px; }

.kxd-scope[b-g6otlisme4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--kxd-r);
    text-align: left;
    border: 1px solid var(--kxd-border);
    background: var(--kxd-surface);
    cursor: pointer;
}

.kxd-scope--on[b-g6otlisme4] { border-color: var(--kxd-accent); background: var(--kxd-accent-soft); }

.kxd-radio[b-g6otlisme4] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--kxd-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kxd-scope--on .kxd-radio[b-g6otlisme4] { border-color: var(--kxd-accent); }
.kxd-radio-dot[b-g6otlisme4] { width: 7px; height: 7px; border-radius: 50%; background: var(--kxd-accent); }
.kxd-scope-label[b-g6otlisme4] { flex: 1; font-size: 13px; color: var(--kxd-text-2); }
.kxd-scope--on .kxd-scope-label[b-g6otlisme4] { color: var(--kxd-accent-text); font-weight: 500; }
.kxd-scope-meta[b-g6otlisme4] { font-size: 11.5px; color: var(--kxd-text-3); }

/* ── Columns ────────────────────────────────────────────────────────── */
.kxd-cols[b-g6otlisme4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border: 1px solid var(--kxd-border);
    border-radius: var(--kxd-r);
    padding: 6px;
}

.kxd-col[b-g6otlisme4] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.kxd-col:hover[b-g6otlisme4] { background: var(--kxd-hover); }
.kxd-col--fixed[b-g6otlisme4] { opacity: 0.75; cursor: default; }
.kxd-col--fixed:hover[b-g6otlisme4] { background: none; }
.kxd-col-label[b-g6otlisme4] { font-size: 12.5px; color: var(--kxd-text-2); }

.kxd-check[b-g6otlisme4] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--kxd-border-strong);
    background: var(--kxd-surface);
    color: #fff;
}

.kxd-check--on[b-g6otlisme4] { border-color: var(--kxd-accent); background: var(--kxd-accent); }
.kxd-check :global(.rzi)[b-g6otlisme4] { font-size: 12px; }

.kxd-tag[b-g6otlisme4] { font-size: 10.5px; color: var(--kxd-text-4); margin-left: auto; }
.kxd-tag--warn[b-g6otlisme4] { color: var(--kxd-amber); font-weight: 600; }

.kxd-warn[b-g6otlisme4] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: var(--kxd-r);
    background: var(--kxd-amber-soft);
    color: var(--kxd-amber);
    font-size: 12px;
    line-height: 1.45;
}

.kxd-warn :global(.rzi)[b-g6otlisme4] { font-size: 15px; flex-shrink: 0; }

/* ── Options ────────────────────────────────────────────────────────── */
.kxd-options[b-g6otlisme4] { display: flex; flex-direction: column; gap: 10px; }
.kxd-field-label[b-g6otlisme4] { font-size: 12.5px; color: var(--kxd-text-2); display: block; margin-bottom: 5px; }
.kxd-field--inline[b-g6otlisme4] { display: flex; align-items: center; gap: 10px; }
.kxd-field--inline .kxd-field-label[b-g6otlisme4] { margin-bottom: 0; }

.kxd-filename[b-g6otlisme4] { display: flex; align-items: stretch; }

/* Radzen text box fills the row and joins seamlessly with the extension suffix. */
.kxd-filename[b-g6otlisme4]  .rz-textbox {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.kxd-ext[b-g6otlisme4] {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--kxd-border);
    border-left: none;
    border-top-right-radius: var(--kxd-r);
    border-bottom-right-radius: var(--kxd-r);
    background: var(--kxd-surface-2);
    color: var(--kxd-text-3);
    font-size: 12.5px;
    font-family: ui-monospace, monospace;
}

.kxd-toggle[b-g6otlisme4] { display: flex; align-items: center; gap: 9px; padding: 2px 0; text-align: left; background: none; border: none; cursor: pointer; font-size: 12.5px; color: var(--kxd-text-2); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.kxd-foot[b-g6otlisme4] {
    padding: 11px 18px 13px;
    border-top: 1px solid var(--kxd-border);
    background: var(--kxd-surface-2);
}

.kxd-summary[b-g6otlisme4] { font-size: 12px; color: var(--kxd-text-3); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.kxd-summary :global(.rzi)[b-g6otlisme4] { font-size: 14px; }
.kxd-summary strong[b-g6otlisme4] { color: var(--kxd-text); font-family: ui-monospace, monospace; font-weight: 500; }

.kxd-actions[b-g6otlisme4] { display: flex; gap: 8px; }

.kxd-btn-ghost[b-g6otlisme4],
.kxd-btn-primary[b-g6otlisme4] {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--kxd-r);
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.kxd-btn-ghost[b-g6otlisme4] { background: var(--kxd-surface); border-color: var(--kxd-border); color: var(--kxd-text-2); }
.kxd-btn-ghost:hover[b-g6otlisme4] { background: var(--kxd-hover); }
.kxd-btn-primary[b-g6otlisme4] { flex: 1; background: var(--kxd-accent); color: #fff; }
.kxd-btn-primary:hover[b-g6otlisme4] { filter: brightness(0.96); }
.kxd-btn-primary--done[b-g6otlisme4] { background: var(--kxd-green); }
.kxd-btn-primary:disabled[b-g6otlisme4],
.kxd-btn-ghost:disabled[b-g6otlisme4] { opacity: 0.6; cursor: default; }
.kxd-btn-primary :global(.rzi)[b-g6otlisme4] { font-size: 16px; }
/* _content/Ilinniarfik/Components/Shared/Filtering/KmFilterBar.razor.rz.scp.css */
/* Filter bar — inherits design tokens from the host page (.ctl-page …); fallbacks below keep it
   presentable if dropped anywhere else. */
.kfb[b-f9xwz4tgf3] {
    --kfb-r: var(--r, 8px);
    --kfb-r-lg: var(--r-lg, 12px);
    --kfb-surface: var(--surface, #fff);
    --kfb-surface-2: var(--surface-2, #fafbfc);
    --kfb-hover: var(--surface-hover, #f3f5f8);
    --kfb-border: var(--border, #e6e8ed);
    --kfb-border-strong: var(--border-strong, #d4d8df);
    --kfb-text: var(--text, #0f1729);
    --kfb-text-2: var(--text-2, #4a5468);
    --kfb-text-3: var(--text-3, #7a8499);
    --kfb-text-4: var(--text-4, #9ba3b4);
    --kfb-accent: var(--accent, #3b4cca);
    --kfb-accent-soft: var(--accent-soft, #eef0fc);
    --kfb-accent-text: var(--accent-text, #2733a8);
    --kfb-red: var(--red, #b42318);
    --kfb-red-soft: var(--red-soft, #fde7e3);
    --kfb-shadow-lg: var(--shadow-lg, 0 12px 32px -8px rgba(15,23,41,0.18), 0 4px 12px -4px rgba(15,23,41,0.08));
    font-size: 13.5px;
    color: var(--kfb-text);
}

/* ── Card ─────────────────────────────────────────────────────────── */
.kfb-card[b-f9xwz4tgf3] {
    background: var(--kfb-surface);
    border: 1px solid var(--kfb-border);
    border-radius: var(--kfb-r-lg);
    padding: 12px;
}

.kfb-row1[b-f9xwz4tgf3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Quick search ─────────────────────────────────────────────────── */
.kfb-quick[b-f9xwz4tgf3] {
    position: relative;
    flex: 1 1 220px;
    min-width: 190px;
    display: flex;
    align-items: center;
}

.kfb-quick[b-f9xwz4tgf3]  .rzi,
.kfb-quick[b-f9xwz4tgf3]  .notranslate {
    position: absolute;
    left: 10px;
    color: var(--kfb-text-4);
    font-size: 16px;
    pointer-events: none;
}

/* Radzen text box fills the wrapper; leave room for the leading search icon. */
.kfb-quick[b-f9xwz4tgf3]  .rz-textbox,
.kfb-panel-search[b-f9xwz4tgf3]  .rz-textbox {
    width: 100%;
    padding-left: 32px;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.kfb-btn-ghost[b-f9xwz4tgf3],
.kfb-btn-primary[b-f9xwz4tgf3] {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--kfb-r);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}

.kfb-btn-ghost[b-f9xwz4tgf3] {
    background: var(--kfb-surface);
    border-color: var(--kfb-border);
    color: var(--kfb-text-2);
}

.kfb-btn-ghost:hover[b-f9xwz4tgf3] { background: var(--kfb-hover); }

.kfb-btn-ghost--active[b-f9xwz4tgf3] {
    border-color: var(--kfb-accent);
    color: var(--kfb-accent-text);
}

.kfb-btn-primary[b-f9xwz4tgf3] {
    background: var(--kfb-accent);
    color: #fff;
}

.kfb-btn-primary:hover[b-f9xwz4tgf3] { filter: brightness(0.96); }

.kfb-btn-ghost :global(.rzi)[b-f9xwz4tgf3],
.kfb-btn-primary :global(.rzi)[b-f9xwz4tgf3] { font-size: 16px; }

.kfb-badge[b-f9xwz4tgf3] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--kfb-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Chips ────────────────────────────────────────────────────────── */
.kfb-chips[b-f9xwz4tgf3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--kfb-border);
}

.kfb-chip-wrap[b-f9xwz4tgf3] { position: relative; }

.kfb-chip[b-f9xwz4tgf3] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    font-size: 12.5px;
    border: 1px solid var(--kfb-border-strong);
    background: var(--kfb-surface);
}

.kfb-chip--editing[b-f9xwz4tgf3] {
    border-color: var(--kfb-accent);
    background: var(--kfb-accent-soft);
}

.kfb-chip-main[b-f9xwz4tgf3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 0 10px;
    height: 100%;
    color: var(--kfb-text-2);
    background: none;
    border: none;
    cursor: pointer;
}

.kfb-chip-main :global(.rzi)[b-f9xwz4tgf3] { font-size: 15px; color: var(--kfb-text-3); }
.kfb-chip-label[b-f9xwz4tgf3] { color: var(--kfb-text-3); }
.kfb-chip-op[b-f9xwz4tgf3] { color: var(--kfb-text-4); font-size: 11px; }
.kfb-chip-value[b-f9xwz4tgf3] { color: var(--kfb-accent-text); font-weight: 600; }

.kfb-chip-x[b-f9xwz4tgf3] {
    height: 100%;
    padding: 0 8px;
    color: var(--kfb-text-4);
    border: none;
    border-left: 1px solid var(--kfb-border);
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.kfb-chip-x :global(.rzi)[b-f9xwz4tgf3] { font-size: 14px; }
.kfb-chip-x:hover[b-f9xwz4tgf3] { background: var(--kfb-red-soft); color: var(--kfb-red); }

.kfb-more[b-f9xwz4tgf3],
.kfb-less[b-f9xwz4tgf3] {
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--kfb-border);
    background: var(--kfb-surface-2);
    color: var(--kfb-text-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.kfb-less[b-f9xwz4tgf3] { border: none; background: none; color: var(--kfb-text-3); }

.kfb-clear[b-f9xwz4tgf3] {
    margin-left: auto;
    color: var(--kfb-text-3);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.kfb-clear :global(.rzi)[b-f9xwz4tgf3] { font-size: 14px; }

/* ── Meta row ─────────────────────────────────────────────────────── */
.kfb-meta[b-f9xwz4tgf3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 2px;
}

.kfb-meta-count[b-f9xwz4tgf3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--kfb-text-3);
}

.kfb-meta-count :global(.rzi)[b-f9xwz4tgf3] { font-size: 15px; }
.kfb-meta-count strong[b-f9xwz4tgf3] { color: var(--kfb-text); }
.kfb-meta-actions[b-f9xwz4tgf3] { margin-left: auto; }

/* ── Chip popover ─────────────────────────────────────────────────── */
.kfb-popover[b-f9xwz4tgf3] {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: var(--kfb-surface);
    border: 1px solid var(--kfb-border);
    border-radius: var(--kfb-r);
    box-shadow: var(--kfb-shadow-lg);
    padding: 12px;
}

.kfb-popover-label[b-f9xwz4tgf3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--kfb-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.kfb-popover-actions[b-f9xwz4tgf3] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* clicking anywhere outside an open menu/popover closes it */
.kfb-backdrop-clear[b-f9xwz4tgf3] {
    position: fixed;
    inset: 0;
    z-index: 55;
}

/* ── Value editors (Radzen fields fill their container) ───────────── */
.kfb-date[b-f9xwz4tgf3] { display: flex; gap: 8px; align-items: center; }
.kfb-popover[b-f9xwz4tgf3]  .rz-dropdown,
.kfb-popover[b-f9xwz4tgf3]  .rz-datepicker,
.kfb-popover[b-f9xwz4tgf3]  .rz-numeric,
.kfb-popover[b-f9xwz4tgf3]  .rz-textbox,
.kfb-pf[b-f9xwz4tgf3]  .rz-dropdown,
.kfb-pf[b-f9xwz4tgf3]  .rz-datepicker,
.kfb-pf[b-f9xwz4tgf3]  .rz-numeric,
.kfb-pf[b-f9xwz4tgf3]  .rz-textbox { width: 100%; }

/* ── RemoteEnum "type to search" spinner ──────────────────────────── */
.kfb-remote-wrap[b-f9xwz4tgf3] { position: relative; width: 100%; }

.kfb-remote-spinner[b-f9xwz4tgf3] {
    position: absolute;
    top: 50%;
    right: 32px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid var(--kfb-border-strong);
    border-top-color: var(--kfb-accent);
    border-radius: 50%;
    animation: kfbRemoteSpin-b-f9xwz4tgf3 650ms linear infinite;
    pointer-events: none;
}

@keyframes kfbRemoteSpin-b-f9xwz4tgf3 {
    to { transform: rotate(360deg); }
}

/* ── Slide-over panel ─────────────────────────────────────────────── */
.kfb-scrim[b-f9xwz4tgf3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 41, 0.28);
    z-index: 70;
}

/* The clip. RadzenBody has `transform: translateZ(0)`, which makes it the containing block for
   anything fixed inside it *and* a scroll container — so the closed panel, parked off to the right
   by its transform, added 340px of scrollable width to every list page. This box is exactly its
   containing block (inset: 0) so it can never overflow, and it clips the panel instead of letting
   the parked panel widen the page. Clipping requires being the panel's own containing block, hence
   the panel below is absolute rather than fixed. */
.kfb-panel-clip[b-f9xwz4tgf3] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 75;
    /* Nothing but the panel may take a click: this box covers the whole content area. */
    pointer-events: none;
}

.kfb-panel[b-f9xwz4tgf3] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    pointer-events: auto;
    max-width: 92vw;
    background: var(--kfb-surface);
    border-left: 1px solid var(--kfb-border);
    box-shadow: var(--kfb-shadow-lg);
    transform: translateX(105%);
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
}

.kfb-panel--open[b-f9xwz4tgf3] { transform: translateX(0); }

.kfb-panel-head[b-f9xwz4tgf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--kfb-border);
}

.kfb-panel-title[b-f9xwz4tgf3] { font-size: 14px; font-weight: 600; }
.kfb-panel-title-count[b-f9xwz4tgf3] { color: var(--kfb-text-3); font-weight: 400; }

.kfb-icon-btn[b-f9xwz4tgf3] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kfb-text-3);
    background: none;
    border: none;
    cursor: pointer;
}

.kfb-icon-btn:hover[b-f9xwz4tgf3] { background: var(--kfb-hover); }

.kfb-panel-search[b-f9xwz4tgf3] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--kfb-border);
}

.kfb-panel-search > :global(.rzi)[b-f9xwz4tgf3] {
    position: absolute;
    left: 26px;
    color: var(--kfb-text-4);
    font-size: 15px;
    pointer-events: none;
}


.kfb-panel-body[b-f9xwz4tgf3] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 16px 16px;
}

.kfb-panel-empty[b-f9xwz4tgf3] { font-size: 12.5px; color: var(--kfb-text-3); padding-top: 14px; }

.kfb-group[b-f9xwz4tgf3] { margin-top: 16px; }

.kfb-group-label[b-f9xwz4tgf3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--kfb-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.kfb-group-fields[b-f9xwz4tgf3] { display: flex; flex-direction: column; gap: 12px; }

.kfb-pf-label[b-f9xwz4tgf3] {
    font-size: 12.5px;
    color: var(--kfb-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.kfb-pf-label--active[b-f9xwz4tgf3] { color: var(--kfb-accent-text); font-weight: 500; }

.kfb-pf-dot[b-f9xwz4tgf3] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kfb-accent);
}

.kfb-panel-foot[b-f9xwz4tgf3] {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--kfb-border);
}

.kfb-panel-foot-meta[b-f9xwz4tgf3] {
    font-size: 12px;
    color: var(--kfb-text-3);
    margin-bottom: 8px;
    text-align: center;
}

.kfb-panel-foot-meta strong[b-f9xwz4tgf3] { color: var(--kfb-text); }

.kfb-panel-foot-actions[b-f9xwz4tgf3] { display: flex; gap: 8px; }
.kfb-panel-foot-actions .kfb-btn-ghost[b-f9xwz4tgf3],
.kfb-panel-foot-actions .kfb-btn-primary[b-f9xwz4tgf3] { flex: 1; justify-content: center; }
/* _content/Ilinniarfik/Components/Shared/ImportSourceDialog.razor.rz.scp.css */
.isd[b-v9ho1hqca5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.isd-head[b-v9ho1hqca5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.isd-head-icon[b-v9ho1hqca5] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--r, 8px);
    background: var(--accent-soft);
    color: var(--accent);
}

.isd-title[b-v9ho1hqca5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.isd-subtitle[b-v9ho1hqca5] {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-3);
}

.isd-loading[b-v9ho1hqca5] {
    display: grid;
    place-items: center;
    padding: 20px 0;
}

.isd-empty[b-v9ho1hqca5] {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--r, 8px);
    font-size: 0.8125rem;
    color: var(--text-3);
    text-align: center;
}

.isd-list[b-v9ho1hqca5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.isd-item[b-v9ho1hqca5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r, 8px);
    background: var(--surface);
}

/* An unconfigured source still reads as a real option — it is one, once connected — so this dims the
   row rather than hiding it. */
.isd-item--disabled[b-v9ho1hqca5] {
    background: var(--surface-2);
}

.isd-item-text[b-v9ho1hqca5] {
    flex: 1 1 auto;
    min-width: 0;
}

.isd-item-label[b-v9ho1hqca5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.isd-item-blurb[b-v9ho1hqca5] {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-3);
}

.isd-item-blurb--warn[b-v9ho1hqca5] {
    color: var(--amber);
}

.isd-foot[b-v9ho1hqca5] {
    display: flex;
    justify-content: flex-end;
}
/* _content/Ilinniarfik/Components/Shared/KmMultiDateField.razor.rz.scp.css */
.kmdf[b-slbk4119ir] { display: flex; flex-direction: column; gap: 8px; }

/* The chosen dates, above the entry row so adding one does not move what you are typing into. */
.kmdf-chips[b-slbk4119ir] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kmdf-chip[b-slbk4119ir] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text);
}

/* Tabular so a column of chips lines up digit for digit. */
.kmdf-chip-label[b-slbk4119ir] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kmdf-chip > .bi[b-slbk4119ir] { color: var(--text-4); font-size: 11px; }

.kmdf-chip-remove[b-slbk4119ir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}

.kmdf-chip-remove:hover[b-slbk4119ir] { background: var(--red-soft); color: var(--red); }
.kmdf-chip-remove:disabled[b-slbk4119ir] { cursor: default; opacity: 0.5; }

/* Type on the left, calendar button on the right, as one control. */
.kmdf-entry[b-slbk4119ir] { display: flex; align-items: stretch; gap: 6px; }

.kmdf-input[b-slbk4119ir] {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    box-sizing: border-box;
}

.kmdf-input:focus[b-slbk4119ir] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.kmdf-input--bad[b-slbk4119ir] { border-color: var(--red); }

.kmdf-input--bad:focus[b-slbk4119ir] {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
}

/* Radzen renders the toggle as its own button; this only sizes the slot it sits in. */
.kmdf-calendar[b-slbk4119ir] { flex: 0 0 auto; display: flex; align-items: center; }

.kmdf-error[b-slbk4119ir] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: var(--red);
}

.kmdf-hint[b-slbk4119ir] {
    display: block;
    font-size: 11.5px;
    color: var(--text-3);
}
/* _content/Ilinniarfik/Components/Shared/KmPillSwitch.razor.rz.scp.css */
/* Moved here from Home.razor.css when the dashboard's toggle became a shared control, so the two
   switches cannot drift apart visually. The values are that original's, unchanged. */

.km-pill-group[b-1idhl05u3g] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface-hover, #f3f5f8);
    border: 1px solid var(--border, #e6e8ed);
    border-radius: 999px;
    width: fit-content;
}

.km-pill[b-1idhl05u3g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-3, #7a8499);
    cursor: pointer;
    transition: background 140ms, color 140ms, box-shadow 140ms;
    /* The link form must not look like a link — the two forms are one control. */
    text-decoration: none;
    white-space: nowrap;
}

.km-pill:hover[b-1idhl05u3g] { color: var(--text-2, #4a5468); }

.km-pill--on[b-1idhl05u3g] {
    background: var(--surface, #fff);
    color: var(--text, #0f1729);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 41, 0.04));
}

.km-pill i[b-1idhl05u3g] { font-size: 12px; }
/* _content/Ilinniarfik/Components/Shared/KmRemoteMultiSelect.razor.rz.scp.css */
.krms[b-7c7wyjaw22] { display: flex; flex-direction: column; gap: 8px; }

/* The chosen items. Above the picker rather than inside it, so adding one does not reflow the
   control you are still using. */
.krms-chips[b-7c7wyjaw22] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.krms-chip[b-7c7wyjaw22] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text);
    max-width: 100%;
}

.krms-chip--warn[b-7c7wyjaw22] {
    border-color: #fcd34d;
    background: #fef3c7;
    color: var(--amber);
}

.krms-chip-label[b-7c7wyjaw22] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The detail, inline on a chip. Separated by a middot drawn here rather than punctuation baked into
   the string, so the host's meta text carries no layout of its own. */
.krms-chip-meta[b-7c7wyjaw22] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.krms-chip-meta[b-7c7wyjaw22]::before {
    content: "·";
    margin-right: 5px;
    color: var(--border-strong);
}

.krms-chip--warn .krms-chip-meta[b-7c7wyjaw22] { color: var(--amber); opacity: 0.85; }
.krms-chip--warn .krms-chip-meta[b-7c7wyjaw22]::before { color: currentColor; }

.krms-chip-remove[b-7c7wyjaw22] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}

.krms-chip-remove:hover[b-7c7wyjaw22] { background: var(--red-soft); color: var(--red); }
.krms-chip-remove:disabled[b-7c7wyjaw22] { cursor: default; opacity: 0.5; }
.krms-chip--warn .krms-chip-remove[b-7c7wyjaw22] { color: var(--amber); }

/* One option row in the dropdown: name, then a quiet detail line under it. Radzen owns the row's
   padding and hover, so this only stacks the two. */
.krms-opt[b-7c7wyjaw22] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.krms-opt-label[b-7c7wyjaw22] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A row you can still pick, but shouldn't without knowing why — same amber as the chip. */
.krms-opt--warn .krms-opt-label[b-7c7wyjaw22] { color: var(--amber); }
.krms-opt--warn .krms-opt-label i[b-7c7wyjaw22] { margin-right: 5px; font-size: 11px; }
.krms-opt--warn .krms-opt-meta[b-7c7wyjaw22] { color: var(--amber); opacity: 0.85; }

.krms-opt-meta[b-7c7wyjaw22] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Positioning context for the loading spinner over Radzen's own box. */
.krms-picker[b-7c7wyjaw22] { position: relative; width: 100%; }

.krms-spinner[b-7c7wyjaw22] {
    position: absolute;
    top: 50%;
    right: 32px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: krmsSpin-b-7c7wyjaw22 600ms linear infinite;
    pointer-events: none;
}

@keyframes krmsSpin-b-7c7wyjaw22 {
    to { transform: rotate(360deg); }
}

.krms-warning[b-7c7wyjaw22] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    background: #fef3c7;
    color: var(--amber);
    font-size: 12px;
    line-height: 1.45;
}

.krms-hint[b-7c7wyjaw22] {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--text-3);
}
/* _content/Ilinniarfik/Components/Shared/KmSearch.razor.rz.scp.css */
.km-search-grid[b-xc5vt3152x] {
    display: grid;
    gap: 12px;
    align-items: end;
}

[b-xc5vt3152x] .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* _content/Ilinniarfik/Components/Shared/KmSwitchBanner.razor.rz.scp.css */
/* Mirrors the dashboard hero (.ov-hero in Home.razor.css) so the account area reads as the same
   kind of surface. The dashboard keeps its own copy because its banner carries a bespoke greeting
   block; only the switch itself is shared, via KmPillSwitch. */

.km-banner[b-l1soy00e2j] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
}

.km-banner-content[b-l1soy00e2j] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.km-banner-leading[b-l1soy00e2j] {
    flex-shrink: 0;
}

/* min-width:0 so a long name ellipsises inside the flex row instead of pushing the switch out. */
.km-banner-text[b-l1soy00e2j] {
    min-width: 0;
}

.km-banner-aside[b-l1soy00e2j] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.km-banner-eyebrow[b-l1soy00e2j] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.km-banner-title[b-l1soy00e2j] {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.km-banner-sub[b-l1soy00e2j] {
    font-size: 14px;
    color: var(--text-3);
    margin: 8px 0 0;
    max-width: 560px;
}

@media (max-width: 720px) {
    /* Too narrow for two columns — stack rather than let the switch crowd the title. */
    .km-banner[b-l1soy00e2j] {
        flex-direction: column;
        gap: 16px;
    }
}
/* _content/Ilinniarfik/Components/Shared/KmTimeField.razor.rz.scp.css */
/* One bordered box holding two borderless selects, so hour and minute read as a single
   control rather than two adjacent dropdowns. Mono digits keep the box from reflowing as
   the numbers change width. */

.kmtf[b-03ww61tzru] {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 4px;
    border: 1px solid var(--border-strong, #d4d8df);
    border-radius: var(--r, 8px);
    background: var(--surface, #fff);
}

.kmtf--bad[b-03ww61tzru] {
    border-color: var(--red, #b42318);
}

.kmtf--disabled[b-03ww61tzru] {
    background: var(--surface-2, #fafbfc);
    opacity: 0.65;
}

.kmtf-input[b-03ww61tzru] {
    /* Two characters of mono plus breathing room — fixed so the box never reflows as digits
       change width, and narrow enough that the pair still reads as one time. */
    width: 2.4ch;
    height: 34px;
    padding: 0 4px;
    border: none;
    background: transparent;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text, #0f1729);
    text-align: center;
    box-sizing: content-box;
}

.kmtf-input:focus[b-03ww61tzru] {
    outline: none;
}

.kmtf-input[b-03ww61tzru]::selection {
    background: var(--accent-soft, #eef0fc);
}

.kmtf-input:disabled[b-03ww61tzru] {
    color: var(--text-3, #7a8499);
}

/* The focus ring belongs to the whole box, not to whichever half has focus. */
.kmtf:focus-within[b-03ww61tzru] {
    border-color: var(--accent, #3b4cca);
    box-shadow: 0 0 0 3px var(--accent-soft, #eef0fc);
}

.kmtf--bad:focus-within[b-03ww61tzru] {
    border-color: var(--red, #b42318);
    box-shadow: 0 0 0 3px var(--red-soft, #fde7e3);
}

.kmtf-colon[b-03ww61tzru] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14.5px;
    color: var(--text-3, #7a8499);
}
/* _content/Ilinniarfik/Components/Shared/NotificationBell.razor.rz.scp.css */
.nb-root[b-j9n2jl45uf] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Matches the neighbouring header icon buttons (see MainLayout's .layout-logout-btn). */
.nb-btn[b-j9n2jl45uf] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--km-text-2, #475569);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.nb-btn:hover[b-j9n2jl45uf],
.nb-btn-open[b-j9n2jl45uf] {
    background: rgba(15, 23, 42, 0.06);
    color: var(--km-text, #0f172a);
}

.nb-btn .rzi[b-j9n2jl45uf] {
    font-size: 20px;
}

.nb-badge[b-j9n2jl45uf] {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--km-surface, #fff);
}

/* Sits under the panel and over everything else, so any outside click closes it. */
.nb-backdrop[b-j9n2jl45uf] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.nb-panel[b-j9n2jl45uf] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    width: 360px;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--km-border, #e2e8f0);
    border-radius: 10px;
    background: var(--km-surface, #fff);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.nb-panel-head[b-j9n2jl45uf],
.nb-panel-foot[b-j9n2jl45uf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.nb-panel-head[b-j9n2jl45uf] {
    border-bottom: 1px solid var(--km-border, #e2e8f0);
}

.nb-panel-foot[b-j9n2jl45uf] {
    border-top: 1px solid var(--km-border, #e2e8f0);
    justify-content: center;
}

.nb-panel-title[b-j9n2jl45uf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--km-text, #0f172a);
}

.nb-link[b-j9n2jl45uf] {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--km-accent, #3b4cca);
    cursor: pointer;
}

.nb-link:hover[b-j9n2jl45uf] {
    text-decoration: underline;
}

.nb-list[b-j9n2jl45uf] {
    max-height: 380px;
    overflow-y: auto;
}

.nb-item[b-j9n2jl45uf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--km-border-subtle, #f1f5f9);
    cursor: pointer;
    transition: background 100ms;
}

.nb-item:last-child[b-j9n2jl45uf] {
    border-bottom: none;
}

.nb-item:hover[b-j9n2jl45uf] {
    background: var(--km-surface-2, #f8fafc);
}

.nb-item-unread[b-j9n2jl45uf] {
    background: rgba(59, 76, 202, 0.04);
}

/* Unread marker — a filled dot, with the slot always reserved so titles stay aligned. */
.nb-dot[b-j9n2jl45uf] {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.nb-dot-on[b-j9n2jl45uf] {
    background: var(--km-accent, #3b4cca);
}

.nb-item-body[b-j9n2jl45uf] {
    min-width: 0;
}

.nb-item-title[b-j9n2jl45uf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--km-text, #0f172a);
}

.nb-item-unread .nb-item-title[b-j9n2jl45uf] {
    font-weight: 700;
}

.nb-item-text[b-j9n2jl45uf] {
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--km-text-2, #475569);
}

.nb-item-time[b-j9n2jl45uf] {
    margin-top: 3px;
    font-size: 11px;
    color: var(--km-text-3, #94a3b8);
}

.nb-empty[b-j9n2jl45uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 12px;
    font-size: 12.5px;
    color: var(--km-text-3, #94a3b8);
}
/* _content/Ilinniarfik/Components/Shared/ParticipantRoster.razor.rz.scp.css */
/* ── Roster picker ─────────────────────────────────────────────────────────
   Module teachers first, then anyone standing in. An unticked module teacher
   stays on screen rather than disappearing, so putting them back is one click
   and the "who is off" line has something to name.

   Moved out of BookingDialog.razor.css when the picker became shared; the rules
   are unchanged apart from the class prefix. Everything here reads global tokens
   from app.css, and nothing reaches into Radzen's own markup, so the component
   needs no ::deep. */

.kr-field[b-gf6ijvlccx] {
    display: flex;
    flex-direction: column;
}

.kr-label[b-gf6ijvlccx] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.kr-label-count[b-gf6ijvlccx] {
    margin-left: auto;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-3);
}

.kr-hint[b-gf6ijvlccx] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Positioning context for the add-teacher popover. */
.kr-roster[b-gf6ijvlccx] { position: relative; }

.kr-roster-card[b-gf6ijvlccx] {
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
}

.kr-roster-row[b-gf6ijvlccx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
}

.kr-roster-row:first-child[b-gf6ijvlccx] { border-top: 0; }

/* Stood-down teachers stay listed but recede — they are not taking this occurrence. */
.kr-roster-row--off[b-gf6ijvlccx] { opacity: 0.6; }
.kr-roster-row--off .kr-roster-name[b-gf6ijvlccx] { text-decoration: line-through; }

.kr-avatar[b-gf6ijvlccx] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.kr-roster-text[b-gf6ijvlccx] { min-width: 0; flex: 1; }

.kr-roster-name[b-gf6ijvlccx] {
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-roster-meta[b-gf6ijvlccx] {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-roster-btn[b-gf6ijvlccx] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 12px;
}

.kr-roster-btn--remove:hover[b-gf6ijvlccx] { background: var(--red-soft); color: var(--red); }
.kr-roster-btn--restore:hover[b-gf6ijvlccx] { background: var(--accent-soft); color: var(--accent-text); }

.kr-roster-empty[b-gf6ijvlccx] {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--text-3);
    text-align: center;
}

/* Wrapper for the Radzen combobox that adds somebody to the roster. It sits inside the
   card's border, so it only needs the divider and the inset. */
.kr-roster-add[b-gf6ijvlccx] {
    padding: 7px 8px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* One option inside the dropdown's item template. Radzen owns the row's padding and hover,
   so this only lays out the avatar beside the name. */
.kr-roster-opt[b-gf6ijvlccx] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Busy / blacked-out / outside-availability — read-only rows below the add-combobox, not inside
   it: plain markup with nothing clickable, so there is no popup styling or click-handler to get
   wrong about keeping one from being booked. */
.kr-roster-unavailable[b-gf6ijvlccx] {
    padding: 7px 8px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kr-roster-unavailable-label[b-gf6ijvlccx] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 2px 4px;
}

.kr-roster-row--unavailable[b-gf6ijvlccx] { opacity: 0.55; cursor: not-allowed; }
.kr-roster-row--unavailable .kr-roster-meta[b-gf6ijvlccx] { margin-left: auto; flex-shrink: 0; }

/* ── Roster locked until the host's prerequisite is met ────────────────────
   Rendered rather than hidden, so the step is visible before it is reachable
   and the layout does not reflow once it unlocks. */

.kr-roster--locked .kr-roster-card[b-gf6ijvlccx] {
    background: var(--surface-2);
    border-style: dashed;
}

.kr-roster-locked-text[b-gf6ijvlccx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* _content/Ilinniarfik/Components/Shared/PersonCreateSection.razor.rz.scp.css */
/* Sections use CSS custom properties that cascade from the parent page tokens */
.pc-section[b-qm9yu28zcg] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    padding: 24px 28px;
}

.pc-section--divider[b-qm9yu28zcg] {
    border-top: 1px solid var(--border);
}

.pc-section-label[b-qm9yu28zcg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.pc-section-title[b-qm9yu28zcg] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}

.pc-section-sub[b-qm9yu28zcg] {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
}

.pc-section-fields[b-qm9yu28zcg] {
    min-width: 0;
}

.pc-field-grid[b-qm9yu28zcg] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.pc-span-3[b-qm9yu28zcg]  { grid-column: span 3; }
.pc-span-4[b-qm9yu28zcg]  { grid-column: span 4; }
.pc-span-6[b-qm9yu28zcg]  { grid-column: span 6; }
.pc-span-8[b-qm9yu28zcg]  { grid-column: span 8; }
.pc-span-9[b-qm9yu28zcg]  { grid-column: span 9; }
.pc-span-12[b-qm9yu28zcg] { grid-column: span 12; }

[b-qm9yu28zcg] .form-group {
    margin-bottom: 0;
}

[b-qm9yu28zcg] .field-error,
[b-qm9yu28zcg] .validation-message {
    font-size: 12px !important;
    color: var(--red) !important;
    margin-top: 4px !important;
}
/* _content/Ilinniarfik/Components/Shared/PerspectiveBrowseDialog.razor.rz.scp.css */
/* The perspective browser. Sized so the kind nav, a search box and a page of results all sit
   without scrolling the dialog itself — only the result list scrolls. */

.pbd-scrim[b-qa2quw9d3r] {
    position: fixed;
    inset: 0;
    background: rgba(13, 20, 36, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.pbd[b-qa2quw9d3r] {
    width: 880px;
    max-width: 92vw;
    height: 580px;
    max-height: 88vh;
    background: var(--surface);
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pbd-head[b-qa2quw9d3r] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pbd-head-text[b-qa2quw9d3r] { flex: 1; min-width: 0; }
.pbd-title[b-qa2quw9d3r] { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pbd-subtitle[b-qa2quw9d3r] { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

.pbd-close[b-qa2quw9d3r] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.pbd-close:hover[b-qa2quw9d3r] { background: var(--surface-hover); color: var(--text); }

.pbd-body[b-qa2quw9d3r] { flex: 1; display: flex; min-height: 0; }

.pbd-nav[b-qa2quw9d3r] {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    padding: 10px;
    overflow-y: auto;
}

.pbd-nav-item[b-qa2quw9d3r] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 6px;
    text-align: left;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    margin-bottom: 2px;
}

.pbd-nav-item:hover[b-qa2quw9d3r] { background: var(--surface-hover); }

.pbd-nav-item--on[b-qa2quw9d3r] {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-weight: 600;
}

.pbd-nav-label[b-qa2quw9d3r] { flex: 1; min-width: 0; }

/* The letter-on-colour square that identifies a kind, used in the nav, the rows and the rail card. */
.pbd-chip[b-qa2quw9d3r] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.pbd-chip--sm[b-qa2quw9d3r] { width: 22px; height: 22px; font-size: 10.5px; }

.pbd-main[b-qa2quw9d3r] { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pbd-tools[b-qa2quw9d3r] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pbd-search[b-qa2quw9d3r] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--r, 8px);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
    box-sizing: border-box;
}

.pbd-search:focus[b-qa2quw9d3r] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pbd-alpha[b-qa2quw9d3r] { display: flex; flex-wrap: wrap; gap: 3px; }

.pbd-alpha-btn[b-qa2quw9d3r] {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 5px;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pbd-alpha-btn:hover[b-qa2quw9d3r] { background: var(--surface-hover); color: var(--text); }
.pbd-alpha-btn--on[b-qa2quw9d3r] { background: var(--accent); color: #fff; }
.pbd-alpha-btn--on:hover[b-qa2quw9d3r] { background: var(--accent); color: #fff; }

.pbd-list[b-qa2quw9d3r] { flex: 1; overflow-y: auto; padding: 6px 10px 12px; }

.pbd-row[b-qa2quw9d3r] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.pbd-row:hover[b-qa2quw9d3r] { background: var(--surface-hover); }

.pbd-row-text[b-qa2quw9d3r] { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.pbd-row-name[b-qa2quw9d3r] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbd-row-meta[b-qa2quw9d3r] {
    font-size: 11.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbd-empty[b-qa2quw9d3r] {
    padding: 28px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-3);
}

.pbd-foot[b-qa2quw9d3r] {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-3);
}
/* _content/Ilinniarfik/Components/Shared/TeacherRoster.razor.rz.scp.css */
/* ── Roster picker ─────────────────────────────────────────────────────────
   Module teachers first, then anyone standing in. An unticked module teacher
   stays on screen rather than disappearing, so putting them back is one click
   and the "who is off" line has something to name.

   Moved out of BookingDialog.razor.css when the picker became shared; the rules
   are unchanged apart from the class prefix. Everything here reads global tokens
   from app.css, and nothing reaches into Radzen's own markup, so the component
   needs no ::deep. */

.kr-field[b-8u0iwpbx6j] {
    display: flex;
    flex-direction: column;
}

.kr-label[b-8u0iwpbx6j] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.kr-label-count[b-8u0iwpbx6j] {
    margin-left: auto;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-3);
}

.kr-hint[b-8u0iwpbx6j] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Positioning context for the add-teacher popover. */
.kr-roster[b-8u0iwpbx6j] { position: relative; }

.kr-roster-card[b-8u0iwpbx6j] {
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
}

.kr-roster-row[b-8u0iwpbx6j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
}

.kr-roster-row:first-child[b-8u0iwpbx6j] { border-top: 0; }

/* Stood-down teachers stay listed but recede — they are not taking this occurrence. */
.kr-roster-row--off[b-8u0iwpbx6j] { opacity: 0.6; }
.kr-roster-row--off .kr-roster-name[b-8u0iwpbx6j] { text-decoration: line-through; }

.kr-avatar[b-8u0iwpbx6j] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.kr-roster-text[b-8u0iwpbx6j] { min-width: 0; flex: 1; }

.kr-roster-name[b-8u0iwpbx6j] {
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-roster-meta[b-8u0iwpbx6j] {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-roster-btn[b-8u0iwpbx6j] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 12px;
}

.kr-roster-btn--remove:hover[b-8u0iwpbx6j] { background: var(--red-soft); color: var(--red); }
.kr-roster-btn--restore:hover[b-8u0iwpbx6j] { background: var(--accent-soft); color: var(--accent-text); }

.kr-roster-empty[b-8u0iwpbx6j] {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--text-3);
    text-align: center;
}

/* Wrapper for the Radzen combobox that adds somebody to the roster. It sits inside the
   card's border, so it only needs the divider and the inset. */
.kr-roster-add[b-8u0iwpbx6j] {
    padding: 7px 8px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* One option inside the dropdown's item template. Radzen owns the row's padding and hover,
   so this only lays out the avatar beside the name. */
.kr-roster-opt[b-8u0iwpbx6j] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── Roster locked until the host's prerequisite is met ────────────────────
   Rendered rather than hidden, so the step is visible before it is reachable
   and the layout does not reflow once it unlocks. */

.kr-roster--locked .kr-roster-card[b-8u0iwpbx6j] {
    background: var(--surface-2);
    border-style: dashed;
}

.kr-roster-locked-text[b-8u0iwpbx6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* _content/Ilinniarfik/Components/Tables/KimikApiDataTable.razor.rz.scp.css */
/* ── Table card header ────────────────────────────────────── */
.idt-header[b-3dxzgh91md] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e6e8ed);
    gap: 12px;
}

.idt-count-chip[b-3dxzgh91md] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3, #7a8499);
    background: var(--surface-2, #fafbfc);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border, #e6e8ed);
    font-variant-numeric: tabular-nums;
}

.idt-count-label[b-3dxzgh91md] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3, #7a8499);
}

.idt-header-spacer[b-3dxzgh91md] {
    flex: 1;
}