/*
 * SICERMAT UI Foundation Contract v1 (D-17).
 * Token di blok ini adalah acuan tunggal untuk migrasi UI-01 dan seterusnya.
 * Alias --uin-* dipertahankan agar halaman lama tetap kompatibel.
 */
:root {
    /* Typography */
    --sc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --sc-text-xs: .75rem;
    --sc-text-sm: .875rem;
    --sc-text-md: 1rem;
    --sc-text-lg: 1.125rem;
    --sc-text-xl: 1.5rem;
    --sc-leading-tight: 1.25;
    --sc-leading-normal: 1.5;
    --sc-leading-readable: 1.65;

    /* Spacing: kelipatan dasar 4 px */
    --sc-space-1: .25rem;
    --sc-space-2: .5rem;
    --sc-space-3: .75rem;
    --sc-space-4: 1rem;
    --sc-space-5: 1.25rem;
    --sc-space-6: 1.5rem;
    --sc-space-8: 2rem;
    --sc-space-10: 2.5rem;

    /* Shape, control, icon, and focus */
    --sc-radius-sm: .5rem;
    --sc-radius-md: .75rem;
    --sc-radius-lg: 1rem;
    --sc-radius-pill: 999px;
    --sc-density-compact-control: 2.25rem;
    --sc-density-default-control: 2.75rem;
    --sc-density-comfortable-control: 3.25rem;
    --sc-density-table-row: 3rem;
    --sc-control-height: 2.75rem;
    --sc-target-min: 2.75rem;
    --sc-icon-sm: 1rem;
    --sc-icon-md: 1.25rem;
    --sc-icon-lg: 1.5rem;
    --sc-focus-width: 2px;
    --sc-focus-offset: 2px;
    --sc-focus-ring: 0 0 0 3px rgba(0, 112, 60, .2);
    --sc-focus-color: #0b57d0;
    --sc-focus-halo: var(--sc-color-surface);
    --sc-shadow-card: 0 7px 24px rgba(0, 112, 60, .075);
    --sc-shadow-sm: 0 2px 8px rgba(0, 112, 60, .08);

    /* Brand and semantic colors */
    --sc-color-brand: #00703c;
    --sc-color-brand-strong: #005c32;
    --sc-color-brand-soft: #eaf6ef;
    --sc-color-on-brand: #ffffff;
    --sc-color-accent: #d6a514;
    --sc-color-accent-strong: #a97900;
    --sc-color-accent-soft: #fff8df;
    --sc-color-info: #1769e8;
    --sc-color-info-soft: #edf5ff;
    --sc-color-success: #137a3d;
    --sc-color-success-soft: #eaf8ef;
    --sc-color-warning: #a45b00;
    --sc-color-warning-soft: #fff6e8;
    --sc-color-danger: #c42b3f;
    --sc-color-danger-soft: #fff0f2;
    --sc-color-success-strong: var(--sc-color-success);
    --sc-color-warning-strong: var(--sc-color-warning);
    --sc-color-ink: #17251e;
    --sc-color-heading: var(--sc-color-ink);
    --sc-color-muted: #5f6f67;
    --sc-color-line: #dbe4e0;
    --sc-color-surface: #ffffff;
    --sc-color-surface-raised: #f7faf8;
    --sc-color-canvas: #f7faf8;

    /* Compatibility aliases; jangan gunakan pada komponen baru. */
    --uin-green: var(--sc-color-brand);
    --uin-green-dark: var(--sc-color-brand-strong);
    --uin-green-soft: var(--sc-color-brand-soft);
    --uin-gold: var(--sc-color-accent);
    --uin-gold-dark: var(--sc-color-accent-strong);
    --uin-gold-soft: var(--sc-color-accent-soft);
}

/* Analitik CPL: filter-first workspace, three readable portfolios, and print actions. */
.sc-cpl-analytics-page {
    display: grid;
    gap: var(--sc-space-5);
}

.sc-cpl-analytics-intro,
.sc-cpl-analysis-panel--top,
.sc-cpl-table-card,
.sc-cpl-student-profile,
.sc-cpl-competency-section {
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-sm);
}

.sc-cpl-analytics-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-5);
    padding: var(--sc-space-5);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-color-brand-soft));
}

.sc-cpl-eyebrow {
    margin: 0 0 .25rem;
    color: var(--sc-color-brand);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sc-cpl-analytics-title,
.sc-cpl-section-title {
    margin: 0;
    color: var(--sc-color-heading);
    font-size: var(--sc-text-xl);
    font-weight: 800;
}

.sc-cpl-analytics-subtitle,
.sc-cpl-section-caption {
    margin: .35rem 0 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
}

.sc-cpl-secondary-action,
.sc-cpl-print-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--sc-radius-md);
    padding: .65rem 1rem;
    font-size: var(--sc-text-sm);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.sc-cpl-secondary-action {
    border: 1px solid var(--sc-color-line);
    color: var(--sc-color-heading);
    background: var(--sc-color-surface);
}

.sc-cpl-print-action {
    color: #fff;
    background: var(--sc-color-brand);
    box-shadow: var(--sc-shadow-sm);
}

.sc-cpl-print-action:hover,
.sc-cpl-print-action:focus-visible {
    background: var(--sc-color-brand-strong);
}

.sc-cpl-export-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.sc-cpl-export-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: .65rem .9rem;
    color: var(--sc-color-heading);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-sm);
    font-size: var(--sc-text-sm);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.sc-cpl-export-action:hover,
.sc-cpl-export-action:focus-visible {
    border-color: var(--sc-color-brand);
    color: var(--sc-color-brand-strong);
    background: var(--sc-color-brand-soft);
}

.sc-cpl-export-action--word { border-color: #93b5e6; }
.sc-cpl-export-action--excel { border-color: #9acaa8; }

.sc-cpl-print-hint,
.sc-cpl-context-badge {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 700;
}

.sc-cpl-context-badge {
    border: 1px solid var(--sc-color-line);
    border-radius: 999px;
    padding: .35rem .7rem;
    background: var(--sc-color-surface-raised);
    white-space: nowrap;
}

.sc-cpl-analysis-panel--top {
    padding: var(--sc-space-5);
}

.sc-cpl-analysis-panel__header,
.sc-cpl-section-toolbar,
.sc-cpl-table-card__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-4);
}

.sc-cpl-analytics-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-space-2);
    padding: .35rem;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface-raised);
}

.sc-cpl-analytics-tab {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 1px solid transparent;
    border-radius: var(--sc-radius-md);
    color: var(--sc-color-muted);
    background: transparent;
    cursor: pointer;
    font-size: var(--sc-text-sm);
    font-weight: 800;
    text-align: center;
}

.sc-cpl-analytics-tab:hover,
.sc-cpl-analytics-tab:focus-visible {
    color: var(--sc-color-brand);
    background: var(--sc-color-surface);
}

.sc-cpl-analytics-tab.is-active {
    border-color: var(--sc-color-brand);
    color: var(--sc-color-brand-strong);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-sm);
}

.sc-cpl-analytics-tab__index {
    display: inline-flex;
    width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--sc-color-brand-strong);
    background: var(--sc-color-brand-soft);
    font-size: var(--sc-text-xs);
}

.sc-cpl-section-toolbar {
    align-items: center;
}

.sc-cpl-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

.sc-cpl-summary-card {
    min-width: 0;
    border: 1px solid var(--sc-cpl-tone);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-cpl-tone-soft));
}

.sc-cpl-summary-card__label {
    color: var(--sc-cpl-tone);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sc-cpl-summary-card__value {
    margin-top: .45rem;
    color: var(--sc-cpl-tone);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 850;
}

.sc-cpl-summary-card__meta {
    margin-top: .35rem;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
}

/* Alumni accreditation overview cards: a stable five-column layout that does
 * not depend on utility-class generation. */
.alumni-summary-stat-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(11rem, 1fr));
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.25rem;
}

.alumni-summary-stat-card {
    position: relative;
    width: 100%;
    min-height: 9.25rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease, box-shadow .18s ease;
}

.alumni-summary-stat-card::after {
    position: absolute;
    z-index: -1;
    right: -2.2rem;
    bottom: -3rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: var(--sc-cpl-tone-soft);
    content: '';
    opacity: .72;
}

.alumni-summary-stat-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.alumni-on-time-legacy {
    display: none !important;
}

.alumni-summary-stat-card .sc-cpl-summary-card__header {
    align-items: flex-start;
}

.alumni-summary-stat-card .sc-cpl-summary-card__icon {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .7rem;
    background: var(--sc-cpl-tone-soft);
    font-size: 1.05rem;
}

.alumni-summary-stat-card .sc-cpl-summary-card__value {
    margin-top: .8rem;
    letter-spacing: -.02em;
}

@media (max-width: 1024px) {
    .alumni-summary-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .75rem;
    }
}

@media (max-width: 640px) {
    .alumni-summary-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .alumni-summary-stat-card {
        min-height: 8rem;
        padding: .75rem;
    }

    .alumni-summary-stat-card .sc-cpl-summary-card__icon {
        width: 1.65rem;
        height: 1.65rem;
        flex-basis: 1.65rem;
        font-size: .85rem;
    }

    .alumni-summary-stat-card .sc-cpl-summary-card__value {
        font-size: 1.35rem;
    }
}

.sc-cpl-competency-section,
.sc-cpl-table-card,
.sc-cpl-student-profile {
    padding: var(--sc-space-5);
}

.sc-cpl-competency-section__header {
    margin-bottom: var(--sc-space-4);
}

.sc-cpl-competency-section__title {
    margin: 0;
    color: var(--sc-color-heading);
    font-size: var(--sc-text-lg);
    font-weight: 800;
}

.sc-cpl-competency-section__description {
    margin: .35rem 0 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
}

.sc-cpl-competency-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

.sc-cpl-competency-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sc-space-4);
    border: 1px solid var(--sc-cpl-tone);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-cpl-tone-soft));
}

.sc-cpl-competency-card__label {
    color: var(--sc-cpl-tone);
    font-size: var(--sc-text-sm);
    font-weight: 850;
    line-height: 1.35;
    text-transform: uppercase;
}

.sc-cpl-competency-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sc-cpl-competency-card__tag {
    border: 1px solid var(--sc-color-line);
    border-radius: 999px;
    padding: .3rem .55rem;
    color: var(--sc-color-heading);
    background: var(--sc-color-surface);
    font-size: var(--sc-text-xs);
    font-weight: 700;
}

.sc-cpl-competency-card__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sc-space-3);
}

.sc-cpl-competency-card__summary strong {
    color: var(--sc-cpl-tone);
    font-size: 1.75rem;
    font-weight: 850;
}

.sc-cpl-competency-card__summary span {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: 1.45;
    text-align: right;
}

.sc-cpl-data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--sc-text-sm);
}

.sc-cpl-data-table th {
    color: var(--sc-color-heading);
    background: var(--sc-color-surface-raised);
    font-size: var(--sc-text-xs);
    font-weight: 850;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.sc-cpl-data-table th,
.sc-cpl-data-table td {
    border-bottom: 1px solid var(--sc-color-line);
    padding: .85rem .75rem;
    vertical-align: middle;
}

.sc-cpl-data-table tbody tr:hover {
    background: var(--sc-color-brand-soft);
}

.sc-cpl-table-card__intro {
    align-items: center;
    margin-bottom: var(--sc-space-4);
}

.sc-cpl-table-card__intro strong {
    color: var(--sc-color-heading);
    font-size: var(--sc-text-lg);
    font-weight: 800;
}

.sc-cpl-table-card__intro span {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
}

.sc-cpl-status {
    display: inline-flex;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: var(--sc-text-xs);
    font-weight: 800;
    white-space: nowrap;
}

.sc-cpl-status.is-good { color: var(--sc-color-success-strong); background: var(--sc-color-success-soft); }
.sc-cpl-status.is-attention { color: var(--sc-color-warning-strong); background: var(--sc-color-warning-soft); }
.sc-cpl-status.is-muted { color: var(--sc-color-muted); background: var(--sc-color-surface-raised); }

.sc-cpl-empty-cell {
    padding: 2rem 1rem !important;
    color: var(--sc-color-muted);
    text-align: center;
}

.sc-cpl-empty-state {
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    border: 1px dashed var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-5);
    color: var(--sc-color-muted);
    background: var(--sc-color-surface-raised);
    text-align: center;
}

.sc-cpl-empty-state strong { color: var(--sc-color-heading); }

.sc-cpl-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.sc-cpl-student-profile__identity h4 {
    margin: .25rem 0;
    color: var(--sc-color-heading);
    font-size: var(--sc-text-xl);
    font-weight: 850;
}

.sc-cpl-student-profile__identity p { margin: 0; color: var(--sc-color-muted); font-size: var(--sc-text-sm); }

.sc-cpl-student-metrics,
.sc-cpl-course-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
}

.sc-cpl-student-metric,
.sc-cpl-course-metric {
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: .85rem;
    background: var(--sc-color-surface-raised);
}

.sc-cpl-student-metric span,
.sc-cpl-course-metric span { display: block; color: var(--sc-color-muted); font-size: var(--sc-text-xs); font-weight: 750; }
.sc-cpl-student-metric strong,
.sc-cpl-course-metric strong { display: block; margin-top: .25rem; color: var(--sc-color-heading); font-size: 1.35rem; font-weight: 850; }
.sc-cpl-student-metric small,
.sc-cpl-course-metric small { display: block; margin-top: .25rem; color: var(--sc-color-muted); font-size: var(--sc-text-xs); }

.sc-cpl-course-cards { display: grid; gap: var(--sc-space-4); }
.sc-cpl-course-card { border: 1px solid var(--sc-color-line); border-radius: var(--sc-radius-lg); padding: var(--sc-space-5); background: var(--sc-color-surface); box-shadow: var(--sc-shadow-sm); }
.sc-cpl-course-card__header { display: flex; justify-content: space-between; gap: var(--sc-space-4); }
.sc-cpl-course-card__header h4 { margin: .25rem 0; color: var(--sc-color-heading); font-size: var(--sc-text-lg); font-weight: 800; }
.sc-cpl-course-card__header p { margin: 0; color: var(--sc-color-muted); font-size: var(--sc-text-sm); }
.sc-cpl-course-code { color: var(--sc-color-brand); font-size: var(--sc-text-xs); font-weight: 850; letter-spacing: .05em; }
.sc-cpl-course-card__badge { height: fit-content; border-radius: 999px; padding: .35rem .65rem; color: var(--sc-color-brand-strong); background: var(--sc-color-brand-soft); font-size: var(--sc-text-xs); font-weight: 800; white-space: nowrap; }
.sc-cpl-course-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sc-cpl-study-program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-3); }
.sc-cpl-study-program-card { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--sc-color-line); border-radius: var(--sc-radius-md); padding: var(--sc-space-4); color: inherit; text-decoration: none; background: var(--sc-color-surface-raised); }
.sc-cpl-study-program-card:hover { border-color: var(--sc-color-brand); background: var(--sc-color-brand-soft); }
.sc-cpl-study-program-card span, .sc-cpl-study-program-card em { color: var(--sc-color-muted); font-size: var(--sc-text-xs); font-style: normal; }
.sc-cpl-study-program-card strong { color: var(--sc-color-heading); font-size: var(--sc-text-sm); }

@media (max-width: 64rem) {
    .sc-cpl-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-cpl-competency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-cpl-study-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    .sc-cpl-analytics-intro,
    .sc-cpl-analysis-panel__header,
    .sc-cpl-section-toolbar,
    .sc-cpl-table-card__intro,
    .sc-cpl-course-card__header { flex-direction: column; align-items: stretch; }
    .sc-cpl-analytics-tabs { grid-template-columns: 1fr; }
    .sc-cpl-summary-grid,
    .sc-cpl-competency-grid,
    .sc-cpl-detail-grid,
    .sc-cpl-student-metrics,
    .sc-cpl-course-metrics,
    .sc-cpl-study-program-grid { grid-template-columns: 1fr; }
    .sc-cpl-analytics-tab { justify-content: flex-start; padding-inline: 1rem; }
    .sc-cpl-export-actions { width: 100%; justify-content: stretch; }
    .sc-cpl-print-action, .sc-cpl-export-action, .sc-cpl-secondary-action { flex: 1 1 0; width: 100%; }
    .sc-cpl-competency-card__summary { align-items: flex-start; flex-direction: column; }
    .sc-cpl-competency-card__summary span { text-align: left; }
}

.fi-body {
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
    line-height: var(--sc-leading-normal);
}

:where(.fi-main, .fi-modal, .fi-slide-over) :focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
}

:where(.fi-main, .fi-modal, .fi-slide-over) :is(button, [role="button"], select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) {
    min-height: var(--sc-target-min);
}

.dark {
    --sc-color-brand-soft: #123d2b;
    --sc-color-accent-soft: #3d3214;
    --sc-color-info-soft: #172c4d;
    --sc-color-success-soft: #143924;
    --sc-color-warning-soft: #412d13;
    --sc-color-danger-soft: #421b24;
    --sc-color-ink: #f1f5f3;
    --sc-color-muted: #bdc8c2;
    --sc-color-line: #425149;
    --sc-color-surface: #17201b;
    --sc-color-canvas: #101713;
    --sc-focus-color: #8bc4ff;
}

/*
 * Filament 4 membungkus theme di cascade layers. Untuk deklarasi !important,
 * layer yang dideklarasikan lebih awal memiliki prioritas lebih tinggi.
 * Tempatkan kontrak kontras tabel di layer pertama milik Filament agar warna
 * sel header tidak dikalahkan oleh komponen/utility bawaannya.
 */
@layer properties {
    .fi-ta-table thead th {
        background-color: #075c3a !important;
        background-image: linear-gradient(135deg, #075c3a 0%, #08764a 100%) !important;
        border-color: rgba(255, 255, 255, .18) !important;
        color: #fff !important;
    }

    .fi-ta-table thead th *,
    .fi-ta-table thead th button,
    .fi-ta-table thead th a,
    .fi-ta-table thead th svg {
        color: #fff !important;
    }
}

/* Fluid working canvas on every Filament page, including collapsed sidebar. */
.fi-main,
.fi-page,
.fi-page > section,
.fi-page-content {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 1024px) {
    .fi-main {
        padding-left: clamp(1rem, 1.6vw, 2rem) !important;
        padding-right: clamp(1rem, 1.6vw, 2rem) !important;
    }
}

/* Topik/judul halaman di atas filter. */
.fi-header-heading {
    color: var(--uin-green-dark) !important;
    padding-left: .85rem;
    border-left: .32rem solid var(--uin-gold);
}

.fi-header-subheading {
    color: #52645b !important;
    padding-left: 1.2rem;
}

.uin-page-topic {
    color: var(--uin-green-dark) !important;
    padding: .7rem .9rem;
    border-left: 4px solid var(--uin-gold);
    border-radius: .35rem;
    background: var(--uin-green-soft);
}

.uin-form-card {
    border-color: rgba(0, 112, 60, .25) !important;
    box-shadow: 0 5px 18px rgba(0, 92, 50, .07) !important;
}

/* Semua section/form mendapat identitas visual yang konsisten. */
.fi-section {
    overflow: hidden;
    border-color: rgba(0, 112, 60, .22) !important;
    box-shadow: 0 5px 18px rgba(0, 92, 50, .07) !important;
}

.fi-section-header {
    background: var(--uin-green-soft);
    border-bottom: 1px solid rgba(0, 112, 60, .18);
}

.fi-section-header-heading,
.fi-section-header .fi-section-header-heading {
    color: var(--uin-green-dark) !important;
    font-weight: 700 !important;
}

.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label span {
    color: #244c38;
    font-weight: 600;
}

.fi-input-wrp:focus-within {
    border-color: var(--uin-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 112, 60, .13) !important;
}

/* Repeater, termasuk Riwayat Pendidikan pada Informasi Dosen. */
.fi-fo-repeater > ul > li,
.fi-fo-repeater-item {
    border-left: 3px solid rgba(0, 112, 60, .45) !important;
    background: #fbfdfc !important;
}

/* Judul dan kepala tabel. */
.fi-ta-header-heading {
    color: var(--uin-green-dark) !important;
    font-weight: 750 !important;
}

.uin-table-title {
    color: var(--uin-green-dark) !important;
    padding-left: .7rem;
    border-left: 4px solid var(--uin-gold);
}

.fi-ta-table thead,
.fi-ta-table thead tr {
    background: var(--uin-green) !important;
}

.fi-ta-table thead th,
.fi-ta-table thead th span,
.fi-ta-table thead th button {
    color: #fff !important;
}

/* Filament memberi warna latar pada tiap <th>. Terapkan warna pada sel,
   bukan hanya <thead>, agar utility bg-gray tidak menghasilkan teks putih
   di atas latar yang nyaris putih seperti pada tabel Mata Kuliah. */
.fi-ta-table thead th {
    background-color: #075c3a !important;
    background-image: linear-gradient(135deg, #075c3a 0%, #08764a 100%) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.fi-ta-table thead th *,
.fi-ta-table thead th svg {
    color: #fff !important;
    fill: currentColor;
}

.fi-ta-table tbody tr:hover {
    background-color: var(--uin-gold-soft) !important;
}

.uin-data-table thead,
.uin-data-table thead tr {
    background: var(--uin-green) !important;
}

.uin-data-table thead th,
.uin-data-table thead th * {
    color: #fff !important;
}

.uin-data-table tbody tr:hover {
    background-color: var(--uin-gold-soft) !important;
}

/*
 * Sistem tabel global AnalytiCPL.
 * Selector dibuat cukup umum untuk tabel Blade/Livewire, namun tanpa
 * !important pada warna sel agar heatmap dan matriks khusus tetap menang.
 */
:where(.fi-main, .fi-modal, .fi-slide-over) table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 74, .14);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 7px 24px rgba(0, 112, 60, .075),
        0 0 0 1px rgba(255, 255, 255, .72) inset;
    color: #26372f;
    font-variant-numeric: tabular-nums;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table thead {
    background: linear-gradient(135deg, #075c3a 0%, #08764a 58%, #0a8052 100%);
    box-shadow:
        0 5px 15px rgba(0, 70, 40, .15),
        0 1px 0 rgba(255, 255, 255, .12) inset;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table thead th {
    height: 3.15rem;
    padding: .72rem 1rem;
    border-bottom: 1px solid rgba(0, 112, 60, .16);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .035em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    background-color: #075c3a;
    background-image: linear-gradient(135deg, #075c3a 0%, #08764a 100%);
}

:where(.fi-main, .fi-modal, .fi-slide-over) table thead th + th {
    border-left: 1px solid rgba(255, 255, 255, .14);
}

:where(.fi-main, .fi-modal, .fi-slide-over) table thead th *,
:where(.fi-main, .fi-modal, .fi-slide-over) table thead th button,
:where(.fi-main, .fi-modal, .fi-slide-over) table thead th a {
    color: inherit;
}

/* Kontras header mengalahkan utility warna lokal, tetapi tetap dapat
   dioverride oleh tabel khusus seperti heatmap dan matriks PA. */
.fi-main table thead th,
.fi-modal table thead th,
.fi-slide-over table thead th {
    color: #fff;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody td {
    padding: .78rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, .105);
    color: #405048;
    font-size: .84rem;
    line-height: 1.5;
    vertical-align: middle;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr {
    background: rgba(255, 255, 255, .96);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr:nth-child(even) {
    background: rgba(247, 251, 249, .94);
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr:hover {
    position: relative;
    z-index: 1;
    background: #f2faf5;
    box-shadow:
        3px 0 0 var(--uin-gold) inset,
        0 3px 13px rgba(0, 112, 60, .075);
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr:last-child td {
    border-bottom: 0;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tbody td:first-child {
    color: #263d31;
    font-weight: 600;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table tfoot td {
    padding: .72rem 1rem;
    border-top: 1px solid rgba(0, 112, 60, .15);
    background: #f4f9f6;
    color: #31543f;
    font-weight: 700;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table a {
    font-weight: 650;
    text-underline-offset: 2px;
}

:where(.fi-main, .fi-modal, .fi-slide-over) table button {
    min-height: 2rem;
}

/* Tabel Filament mendapat header institusional yang tetap lembut. */
.fi-ta-table {
    border-radius: .8rem !important;
    box-shadow:
        0 7px 24px rgba(0, 112, 60, .08),
        0 0 18px rgba(0, 112, 60, .035) !important;
}

.fi-ta-table thead,
.fi-ta-table thead tr {
    background: linear-gradient(135deg, #087447 0%, #16865a 100%) !important;
}

.fi-ta-table tbody td {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

@media (max-width: 767px) {
    :where(.fi-main, .fi-modal, .fi-slide-over) table {
        border-radius: .65rem;
    }

    :where(.fi-main, .fi-modal, .fi-slide-over) table thead th,
    :where(.fi-main, .fi-modal, .fi-slide-over) table tbody td,
    :where(.fi-main, .fi-modal, .fi-slide-over) table tfoot td {
        padding: .65rem .75rem;
    }
}

/* Tombol utama: hijau UIN, interaksi/aksen: emas. */
.fi-btn.fi-color-primary {
    color: #fff !important;
    background: var(--uin-green) !important;
    border-color: var(--uin-green-dark) !important;
    box-shadow: 0 3px 8px rgba(0, 92, 50, .2) !important;
}

.fi-btn.fi-color-primary:hover {
    color: #fff !important;
    background: var(--uin-green-dark) !important;
    border-color: var(--uin-green-dark) !important;
}

.fi-btn.fi-color-warning {
    color: #173d2a !important;
    background-color: var(--uin-gold) !important;
}

.uin-action-primary {
    color: #fff !important;
    background: var(--uin-green) !important;
    border: 1px solid var(--uin-green-dark) !important;
}

.uin-action-primary:hover {
    color: #fff !important;
    background: var(--uin-green-dark) !important;
}

.uin-action-secondary {
    color: var(--uin-green-dark) !important;
    border-color: var(--uin-gold) !important;
    background: var(--uin-gold-soft) !important;
}

.uin-action-secondary:hover {
    color: #fff !important;
    background: var(--uin-green) !important;
    border-color: var(--uin-green) !important;
}

.fi-link.fi-color-primary,
.fi-ac-link-action.fi-color-primary {
    color: var(--uin-green) !important;
}

/* Dark mode tetap nyaman dibaca. */
.dark .fi-section-header {
    background: rgba(0, 112, 60, .22);
}

.dark .fi-section-header-heading,
.dark .fi-header-heading,
.dark .fi-fo-field-wrp-label label,
.dark .fi-fo-field-wrp-label span {
    color: #d8f3e4 !important;
}

/* Pengaturan Role & Permission */
.role-permission-step {
    min-height: 100%;
}

.role-permission-step > .fi-section-header {
    background: #f2f7f4;
    border-top: 3px solid var(--uin-green);
}

.role-permission-step .fi-section-header-heading {
    font-size: 1rem !important;
}

.role-scope-note {
    padding: .9rem;
    border: 1px solid #d7e8df;
    border-radius: .7rem;
    color: #426052;
    background: #f7fbf9;
    font-size: .82rem;
    line-height: 1.55;
}

.role-permission-config .fi-fo-checkbox-list-option-label {
    font-size: .82rem;
}

.role-permission-config fieldset > legend,
.role-permission-config .fi-fo-checkbox-list-group-label {
    color: var(--uin-green-dark) !important;
    font-weight: 750 !important;
}

.role-preview-card {
    overflow: hidden;
    border: 1px solid #d8e5de;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 7px 22px rgba(0, 92, 50, .08);
}

.role-preview-brand {
    padding: 1rem 1.1rem;
    color: #fff;
    background: var(--uin-green-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.role-preview-role {
    margin: 1rem 1rem .25rem;
    color: var(--uin-green-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.role-preview-card > p {
    margin: 0 1rem 1rem;
    color: #64756c;
    font-size: .78rem;
}

.role-preview-card ul {
    margin: 0;
    padding: .3rem 1rem 1rem;
    list-style: none;
}

.role-preview-card li {
    display: flex;
    gap: .55rem;
    padding: .52rem 0;
    border-bottom: 1px solid #edf2ef;
    color: #263f33;
    font-size: .82rem;
}

.role-preview-card li span {
    color: var(--uin-green);
    font-weight: 800;
}

.role-preview-empty {
    color: #7c8b83 !important;
}

.role-preview-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    padding: 1rem;
    background: var(--uin-green-soft);
    color: #365445;
    font-size: .75rem;
}

.role-preview-summary span {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.role-preview-summary strong {
    color: var(--uin-green-dark);
    font-size: 1rem;
}

.dark .role-preview-card,
.dark .role-scope-note {
    border-color: #33483e;
    background: #18231e;
    color: #d6e4dc;
}

.dark .role-preview-card li,
.dark .role-preview-role {
    color: #d8f3e4;
}

/* Identitas aplikasi, lembaga, dan unit aktif pada top header */
.app-topbar-identity {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding-inline: .35rem 1rem;
}

.app-topbar-brand {
    color: var(--uin-green-dark);
    font-size: 1rem;
    font-weight: 850;
    white-space: nowrap;
}

.app-topbar-context {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-left: 1px solid #d7e5dd;
    padding-left: .85rem;
    font-size: .68rem;
    line-height: 1.25;
}

.app-topbar-context span,
.app-topbar-context strong {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar-context span { color: #68786f; font-weight: 550; }
.app-topbar-context strong { color: #263d32; font-weight: 750; }

.dark .app-topbar-brand { color: #79c99d; }
.dark .app-topbar-context { border-color: #35483e; }
.dark .app-topbar-context span { color: #9fb0a7; }
.dark .app-topbar-context strong { color: #e2eee7; }

@media (max-width: 767px) {
    .app-topbar-context { display: none; }
    .app-topbar-brand { font-size: .9rem; }
}

/* Matriks permission role */
.permission-matrix-shell {
    overflow: hidden;
    border: 1px solid #d9e5de;
    border-radius: .8rem;
    background: #fff;
}

.permission-matrix-help {
    padding: .75rem 1rem;
    border-bottom: 1px solid #e4ece7;
    background: #f5faf7;
    color: #52675c;
    font-size: .78rem;
}

.permission-matrix-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.permission-matrix-group + .permission-matrix-group {
    border-top: 1px solid #d9e5de;
}

.permission-matrix-group-heading {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    padding: .8rem 1rem;
    background: #fff;
}

.permission-matrix-group-heading strong {
    color: var(--uin-green-dark);
    font-size: .88rem;
}

.permission-matrix-group-heading span {
    color: #6d7d74;
    font-size: .72rem;
}

.permission-matrix-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
}

.permission-matrix-table th,
.permission-matrix-table td {
    min-width: 5.2rem;
    height: 3.5rem;
    border-right: 1px solid #e5ece8;
    border-bottom: 1px solid #e5ece8;
    padding: .5rem;
    text-align: center;
    vertical-align: middle;
}

.permission-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #edf6f1;
    color: var(--uin-green-dark);
    font-weight: 800;
}

.permission-matrix-table .permission-module-column {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 16rem;
    min-width: 16rem;
    max-width: 16rem;
    background: #fbfdfc;
    text-align: left;
}

.permission-matrix-table thead .permission-module-column {
    z-index: 4;
    background: var(--uin-green-dark);
    color: #fff;
}

.permission-matrix-table tbody tr:hover td,
.permission-matrix-table tbody tr:hover .permission-module-column {
    background: #f3faf6;
}

.permission-row-toggle,
.permission-column-toggle {
    width: 100%;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.permission-row-toggle { text-align: left; }
.permission-row-toggle strong { display: block; color: #173c29; font-size: .82rem; }
.permission-row-toggle small { display: block; margin-top: .2rem; color: #728278; font-size: .68rem; font-weight: 500; line-height: 1.3; }

.permission-matrix-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.permission-matrix-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.permission-matrix-checkbox span {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border: 1.5px solid #b7c8bf;
    border-radius: .3rem;
    background: #fff;
}

.permission-matrix-checkbox input:checked + span {
    border-color: var(--uin-green);
    background: var(--uin-green);
}

.permission-matrix-checkbox input:checked + span::after {
    content: '✓';
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.permission-cell-unavailable { background: #f7f8f7; }
.permission-empty-cell { color: #c5cec9; }

.dark .permission-matrix-shell { border-color: #33473d; background: #16231c; }
.dark .permission-matrix-group + .permission-matrix-group { border-color: #33473d; }
.dark .permission-matrix-group-heading { background: #16231c; }
.dark .permission-matrix-group-heading strong { color: #bfe5ce; }
.dark .permission-matrix-group-heading span { color: #93a99c; }
.dark .permission-matrix-help,
.dark .permission-matrix-table thead th { border-color: #33473d; background: #20372b; color: #c5ead4; }
.dark .permission-matrix-table th,
.dark .permission-matrix-table td { border-color: #304239; }
.dark .permission-matrix-table .permission-module-column { background: #192a21; }
.dark .permission-row-toggle strong { color: #e0f1e7; }
.dark .permission-cell-unavailable { background: #142019; }

/* Kontrol tampil/sembunyi ringkasan role */
.role-preview-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -.2rem;
}

.role-preview-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .45rem .8rem;
    border: 1px solid #bfd5c8;
    border-radius: .55rem;
    background: #f4faf6;
    color: var(--uin-green-dark);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 750;
}

.role-preview-toggle:hover {
    border-color: var(--uin-green);
    background: #e9f5ed;
}

.fi-grid-col.role-config-expanded {
    --col-span-xl: span 12 / span 12 !important;
    grid-column: 1 / -1 !important;
}

.fi-grid-col.role-preview-panel-hidden {
    display: none !important;
}

.dark .role-preview-toggle {
    border-color: #426351;
    background: #1b3024;
    color: #bfe5ce;
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table {
    border-color: rgba(110, 231, 183, .16);
    background: #17231d;
    color: #d8e7de;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table thead {
    background: linear-gradient(135deg, #06442c 0%, #075c3a 100%);
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table thead th {
    border-color: rgba(110, 231, 183, .14);
    color: #f2fff7;
    background-color: #06442c;
    background-image: linear-gradient(135deg, #06442c 0%, #075c3a 100%);
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr {
    background: #17231d;
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr:nth-child(even) {
    background: #1a2821;
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table tbody tr:hover {
    background: #21372b;
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table tbody td {
    border-color: rgba(148, 163, 184, .12);
    color: #cad9d0;
}

.dark :where(.fi-main, .fi-modal, .fi-slide-over) table tbody td:first-child {
    color: #e0eee6;
}

/* SICERMAT shared primitives v1 (UI-03) */
:where([data-sicermat-primitive], [data-sicermat-primitive] *) {
    box-sizing: border-box;
    min-width: 0;
}

.sc-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sc-space-6);
    border-inline-start: var(--sc-space-1) solid var(--sc-color-accent);
    padding-inline-start: var(--sc-space-4);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-page-header__copy {
    display: grid;
    max-width: 72ch;
    gap: var(--sc-space-2);
}

.sc-page-header__breadcrumbs {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
}

.sc-page-header__eyebrow {
    margin: 0;
    color: var(--sc-color-brand);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: var(--sc-leading-tight);
    text-transform: uppercase;
}

.sc-page-header__title {
    margin: 0;
    color: var(--sc-color-brand-strong);
    font-size: clamp(var(--sc-text-xl), 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: var(--sc-leading-tight);
    overflow-wrap: anywhere;
}

.sc-page-header__description,
.sc-page-header__content {
    margin: 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-md);
    line-height: var(--sc-leading-readable);
    overflow-wrap: anywhere;
}

.sc-page-header__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sc-space-2);
}

.sc-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sc-target-min);
    gap: var(--sc-space-2);
    border: 1px solid transparent;
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-2) var(--sc-space-4);
    cursor: pointer;
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-sm);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sc-action-button:hover:not(.sc-action-button--disabled) {
    transform: translateY(-1px);
}

.sc-action-button:focus-visible,
.sc-action-card__link:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-action-button--primary {
    border-color: var(--sc-color-brand-strong);
    background: var(--sc-color-brand);
    color: var(--sc-color-surface);
}

.sc-action-button--primary:hover:not(.sc-action-button--disabled) {
    background: var(--sc-color-brand-strong);
}

.sc-action-button--secondary {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-surface);
    color: var(--sc-color-brand-strong);
}

.sc-action-button--secondary:hover:not(.sc-action-button--disabled),
.sc-action-button--ghost:hover:not(.sc-action-button--disabled) {
    background: var(--sc-color-brand-soft);
}

.sc-action-button--danger {
    border-color: var(--sc-color-danger);
    background: var(--sc-color-danger);
    color: var(--sc-color-surface);
}

.sc-action-button--danger:hover:not(.sc-action-button--disabled) {
    box-shadow: 0 0 0 var(--sc-focus-width) var(--sc-color-danger-soft);
}

.sc-action-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--sc-color-brand-strong);
}

.sc-action-button--compact {
    min-height: var(--sc-density-compact-control);
    padding-block: var(--sc-space-1);
}

.sc-action-button--comfortable {
    min-height: var(--sc-density-comfortable-control);
    padding-inline: var(--sc-space-5);
}

.sc-action-button--disabled {
    cursor: not-allowed;
    opacity: .56;
    pointer-events: none;
}

.sc-action-button__icon {
    display: inline-grid;
    width: var(--sc-icon-md);
    height: var(--sc-icon-md);
    flex: 0 0 var(--sc-icon-md);
    place-items: center;
}

.sc-action-button__icon > svg {
    width: 100%;
    height: 100%;
}

.sc-action-button__label {
    overflow-wrap: anywhere;
}

.sc-action-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sc-space-4);
    min-height: calc(var(--sc-density-comfortable-control) + var(--sc-space-8));
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-5);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-card);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sc-action-card:has(.sc-action-card__link):hover {
    border-color: var(--sc-color-brand);
    transform: translateY(-1px);
}

.sc-action-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-action-card__icon {
    display: grid;
    width: var(--sc-target-min);
    height: var(--sc-target-min);
    flex: 0 0 var(--sc-target-min);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
    place-items: center;
}

.sc-action-card__icon > svg {
    width: var(--sc-icon-lg);
    height: var(--sc-icon-lg);
}

.sc-action-card__body {
    display: grid;
    align-content: start;
    gap: var(--sc-space-2);
}

.sc-action-card__title,
.sc-action-card__description,
.sc-action-card__meta {
    margin: 0;
    overflow-wrap: anywhere;
}

.sc-action-card__title {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-lg);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
}

.sc-action-card__link {
    border-radius: var(--sc-radius-sm);
    color: inherit;
    text-decoration: none;
}

.sc-action-card__description,
.sc-action-card__content {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-action-card__meta {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-normal);
}

.sc-action-card__badge,
.sc-action-card__actions {
    position: relative;
    z-index: 1;
}

.sc-action-card__actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sc-space-2);
    border-top: 1px solid var(--sc-color-line);
    padding-top: var(--sc-space-3);
}

.sc-action-card--disabled {
    box-shadow: none;
    opacity: .62;
}

.sc-context-bar {
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--sc-space-4);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-context-bar--pinned {
    border-inline-start: var(--sc-space-1) solid var(--sc-color-brand);
}

.sc-context-bar__copy,
.sc-context-bar__heading {
    display: grid;
    gap: var(--sc-space-1);
}

.sc-context-bar__heading {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.sc-context-bar__label {
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-context-bar__pinned {
    width: max-content;
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-1) var(--sc-space-2);
    background: var(--sc-color-surface);
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-xs);
    font-weight: 700;
}

.sc-context-bar__description {
    margin: 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-normal);
}

.sc-context-bar__items,
.sc-context-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.sc-context-bar__actions {
    justify-content: flex-end;
}

.sc-section {
    overflow: hidden;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-card);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-color-line);
    padding: var(--sc-space-5);
    background: var(--sc-color-canvas);
}

.sc-section__copy {
    display: grid;
    gap: var(--sc-space-1);
}

.sc-section__title,
.sc-section__description {
    margin: 0;
    overflow-wrap: anywhere;
}

.sc-section__title {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-lg);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
}

.sc-section__description {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-section__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sc-space-2);
}

.sc-section__content {
    padding: var(--sc-space-5);
    overflow-wrap: anywhere;
}

.sc-section--compact .sc-section__header,
.sc-section--compact .sc-section__content {
    padding: var(--sc-space-3) var(--sc-space-4);
}

.sc-status-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    gap: var(--sc-space-2);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-1) var(--sc-space-3);
    background: var(--sc-color-canvas);
    color: var(--sc-color-muted);
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-xs);
    font-weight: 750;
    line-height: var(--sc-leading-normal);
}

.sc-status-badge__dot {
    width: var(--sc-space-2);
    height: var(--sc-space-2);
    flex: 0 0 var(--sc-space-2);
    border-radius: var(--sc-radius-pill);
    background: currentColor;
}

.sc-status-badge__icon {
    display: inline-grid;
    width: var(--sc-icon-sm);
    height: var(--sc-icon-sm);
    flex: 0 0 var(--sc-icon-sm);
    place-items: center;
}

.sc-status-badge__label {
    overflow-wrap: anywhere;
}

.sc-status-badge--info {
    border-color: var(--sc-color-info);
    background: var(--sc-color-info-soft);
    color: var(--sc-color-info);
}

.sc-status-badge--success {
    border-color: var(--sc-color-success);
    background: var(--sc-color-success-soft);
    color: var(--sc-color-success);
}

.sc-status-badge--warning {
    border-color: var(--sc-color-warning);
    background: var(--sc-color-warning-soft);
    color: var(--sc-color-warning);
}

.sc-status-badge--danger {
    border-color: var(--sc-color-danger);
    background: var(--sc-color-danger-soft);
    color: var(--sc-color-danger);
}

.sc-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sc-space-4);
    border: 1px dashed var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-10);
    background: var(--sc-color-canvas);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
    text-align: center;
}

.sc-empty-state__icon {
    display: grid;
    width: calc(var(--sc-target-min) + var(--sc-space-2));
    height: calc(var(--sc-target-min) + var(--sc-space-2));
    border-radius: var(--sc-radius-pill);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
    place-items: center;
}

.sc-empty-state__icon > svg {
    width: var(--sc-icon-lg);
    height: var(--sc-icon-lg);
}

.sc-empty-state__copy {
    display: grid;
    max-width: 52ch;
    gap: var(--sc-space-2);
}

.sc-empty-state__title,
.sc-empty-state__description {
    margin: 0;
    overflow-wrap: anywhere;
}

.sc-empty-state__title {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-lg);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
}

.sc-empty-state__description,
.sc-empty-state__content {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-space-2);
}

.sc-empty-state--compact {
    gap: var(--sc-space-3);
    padding: var(--sc-space-6);
}

.dark .sc-action-button--primary,
.dark .sc-action-button--danger {
    color: var(--sc-color-ink);
}

@media (max-width: 47.999rem) {
    .sc-page-header,
    .sc-section__header {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-page-header__actions,
    .sc-section__actions {
        justify-content: flex-start;
    }

    .sc-context-bar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .sc-context-bar__actions {
        justify-content: flex-start;
    }

    .sc-action-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-action-card__header {
        align-items: flex-start;
    }

    .sc-action-card__actions {
        grid-column: 1;
        justify-content: flex-start;
    }

    .sc-empty-state {
        padding: var(--sc-space-6);
    }
}

/* SICERMAT accessibility contract v1 (UI-13) */
.sc-skip-link {
    position: fixed;
    z-index: 10000;
    inset-block-start: var(--sc-space-2);
    inset-inline-start: var(--sc-space-2);
    min-height: var(--sc-target-min);
    padding: var(--sc-space-3) var(--sc-space-4);
    border: var(--sc-focus-width) solid var(--sc-color-brand-strong);
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface);
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-normal);
    box-shadow: var(--sc-shadow-card);
    transform: translateY(calc(-100% - var(--sc-space-4)));
    transition: transform 120ms ease;
}

.sc-skip-link:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-focus-color);
    outline-offset: var(--sc-focus-offset);
    box-shadow:
        0 0 0 var(--sc-focus-width) var(--sc-focus-halo),
        0 0 0 calc(var(--sc-focus-width) * 2) var(--sc-focus-color);
    transform: translateY(0);
}

#main-content {
    scroll-margin-block-start: calc(var(--sc-target-min) + var(--sc-space-4));
}

#main-content:focus {
    outline: none;
}

:where(.fi-body, .fi-simple-layout) :is(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role='button'],
    [role='tab'],
    [role='checkbox'],
    [tabindex]:not([tabindex='-1'])
):focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-focus-color) !important;
    outline-offset: var(--sc-focus-offset) !important;
    box-shadow:
        0 0 0 var(--sc-focus-width) var(--sc-focus-halo),
        0 0 0 calc(var(--sc-focus-width) * 2) var(--sc-focus-color) !important;
}

.sc-modal[aria-modal='true']:focus-visible {
    outline-offset: calc(var(--sc-focus-offset) * -1) !important;
}

@media (forced-colors: active) {
    .sc-skip-link,
    :where(.fi-body, .fi-simple-layout) :is(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        [role='button'],
        [role='tab'],
        [role='checkbox'],
        [tabindex]:not([tabindex='-1'])
    ):focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 3px !important;
        box-shadow: none !important;
    }

    .sc-status-badge__dot,
    .sc-feedback-message__marker {
        forced-color-adjust: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.fi-body, .fi-simple-layout) *,
    :where(.fi-body, .fi-simple-layout) *::before,
    :where(.fi-body, .fi-simple-layout) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-action-button,
    .sc-action-card {
        scroll-behavior: auto;
        transition: none;
    }

    .sc-action-button:hover:not(.sc-action-button--disabled),
    .sc-action-card:has(.sc-action-card__link):hover {
        transform: none;
    }
}

/* SICERMAT AcademicContextBar v1 (UI-08) */
.sc-academic-context-bar {
    grid-template-columns: minmax(11rem, .45fr) minmax(0, 2.55fr);
    align-items: start;
    min-width: 0;
}

.sc-academic-context-bar .sc-context-bar__items {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    align-items: start;
    gap: var(--sc-space-3);
}

.sc-academic-context-field {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-1);
}

.sc-academic-context-field__label {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-academic-context-field__locked,
.sc-academic-context-field__select {
    width: 100%;
    min-width: 0;
    min-height: var(--sc-target-min);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font: inherit;
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
}

.sc-academic-context-field__locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-2);
    background: var(--sc-color-canvas);
}

.sc-academic-context-field__locked strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sc-academic-context-field__locked span {
    flex: 0 0 auto;
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-1) var(--sc-space-2);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-xs);
    font-weight: 750;
}

.sc-academic-context-field__locked:focus-visible,
.sc-academic-context-field__select:focus-visible {
    border-color: var(--sc-color-brand);
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-academic-context-field__select:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.sc-academic-context-field__hint {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-tight);
    overflow-wrap: anywhere;
}

@media (max-width: 63.999rem) {
    .sc-academic-context-bar {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.999rem) {
    .sc-academic-context-bar .sc-context-bar__items {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* SICERMAT page header and primary action hierarchy v1 (UI-07) */
.fi-header[data-ui-contract='sicermat-page-header-v1'],
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] {
    min-width: 0;
    align-items: flex-end;
    gap: var(--sc-space-6);
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] > :first-child,
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] .sc-page-header__copy {
    min-width: 0;
    max-width: 72ch;
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] [data-ui-title-format='title-case'],
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] [data-ui-title-format='title-case'] {
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] .fi-header-subheading,
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] .sc-page-header__description {
    max-width: 72ch;
    color: var(--sc-color-muted) !important;
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
    overflow-wrap: anywhere;
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] .fi-header-actions-ctn,
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] .sc-page-header__actions,
.sc-header-action-group {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] .fi-header-actions-ctn,
.sc-page-header[data-ui-contract='sicermat-page-header-v1'] .sc-page-header__actions {
    justify-content: flex-end;
}

.sc-header-action-group--destructive {
    border-inline-start: var(--sc-space-1) solid var(--sc-color-danger-soft);
    padding-inline-start: var(--sc-space-3);
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] :where(button, a)[data-ui-action-role] {
    min-height: var(--sc-target-min);
}

.fi-header[data-ui-contract='sicermat-page-header-v1'] :where(button, a)[data-ui-action-role='primary'] {
    font-weight: 750;
}

@media (max-width: 47.999rem) {
    .fi-header[data-ui-contract='sicermat-page-header-v1'],
    .sc-page-header[data-ui-contract='sicermat-page-header-v1'] {
        align-items: stretch;
        flex-direction: column;
        gap: var(--sc-space-4);
    }

    .fi-header[data-ui-contract='sicermat-page-header-v1'] .fi-header-actions-ctn,
    .sc-page-header[data-ui-contract='sicermat-page-header-v1'] .sc-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .sc-header-action-group--destructive {
        width: 100%;
        border-inline-start: 0;
        border-block-start: var(--sc-space-1) solid var(--sc-color-danger-soft);
        padding-block-start: var(--sc-space-2);
        padding-inline-start: 0;
    }
}

/* SICERMAT golden reference screens v1 (UI-04) */
.sc-reference-page,
.sc-reference-screen {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-5);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-reference-tabs {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
    border-bottom: 1px solid var(--sc-color-line);
    padding-block-end: var(--sc-space-3);
}

.sc-reference-tab {
    min-height: var(--sc-target-min);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-2) var(--sc-space-4);
    background: var(--sc-color-surface);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
    cursor: pointer;
}

.sc-reference-tab:hover,
.sc-reference-tab--active {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
}

.sc-reference-tab:focus-visible,
.sc-reference-field input:focus-visible,
.sc-reference-field select:focus-visible,
.sc-reference-field textarea:focus-visible,
.sc-reference-table-action:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-reference-panel {
    min-width: 0;
}

.sc-reference-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.sc-reference-filter-row,
.sc-reference-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-4);
    margin-block-end: var(--sc-space-5);
}

.sc-reference-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--sc-space-2);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 700;
}

.sc-reference-field--wide {
    grid-column: 1 / -1;
}

.sc-reference-field > span,
.sc-reference-field > small {
    overflow-wrap: anywhere;
}

.sc-reference-field > small {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 500;
    line-height: var(--sc-leading-readable);
}

.sc-reference-field b {
    color: var(--sc-color-danger);
}

.sc-reference-field input,
.sc-reference-field select,
.sc-reference-field textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--sc-target-min);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font: inherit;
    font-weight: 500;
    line-height: var(--sc-leading-readable);
}

.sc-reference-field textarea {
    min-height: calc(var(--sc-target-min) * 2);
    resize: vertical;
}

.sc-reference-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
}

.sc-reference-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
}

.sc-reference-table__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sc-reference-table th,
.sc-reference-table td {
    min-height: var(--sc-density-table-row);
    border-bottom: 1px solid var(--sc-color-line);
    padding: var(--sc-space-3) var(--sc-space-4);
    text-align: start;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.sc-reference-table th {
    background: var(--sc-color-canvas);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.sc-reference-table tbody tr:last-child td {
    border-bottom: 0;
}

.sc-reference-table-action {
    display: inline-flex;
    min-height: var(--sc-target-min);
    align-items: center;
    color: var(--sc-color-brand-strong);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: var(--sc-space-1);
}

.sc-reference-empty-example {
    margin-block-start: var(--sc-space-5);
}

.sc-reference-context-item {
    display: grid;
    min-width: 8rem;
    gap: var(--sc-space-1);
}

.sc-reference-context-item small,
.sc-reference-context-item strong {
    overflow-wrap: anywhere;
}

.sc-reference-context-item small {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
}

.sc-reference-context-item strong {
    font-size: var(--sc-text-sm);
}

.sc-reference-workspace {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-4);
}

.sc-reference-workspace__footer,
.sc-reference-workspace__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
}

.sc-reference-workspace__footer {
    justify-content: space-between;
    border-top: 1px solid var(--sc-color-line);
    padding-block-start: var(--sc-space-4);
}

.sc-reference-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.sc-reference-kpi {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--sc-space-2);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-card);
}

.sc-reference-kpi > span,
.sc-reference-kpi > strong {
    overflow-wrap: anywhere;
}

.sc-reference-kpi > span {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    font-weight: 650;
}

.sc-reference-kpi > strong {
    font-size: var(--sc-text-xl);
    line-height: var(--sc-leading-tight);
}

.sc-reference-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: var(--sc-space-4);
}

.sc-reference-bars,
.sc-reference-bar-row {
    display: grid;
    gap: var(--sc-space-3);
}

.sc-reference-bar-row {
    gap: var(--sc-space-2);
}

.sc-reference-bar-row__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-3);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
}

.sc-reference-bar-row__label strong {
    color: var(--sc-color-ink);
}

.sc-reference-bar {
    height: var(--sc-space-3);
    overflow: hidden;
    border-radius: var(--sc-radius-pill);
    background: var(--sc-color-line);
}

.sc-reference-bar > span {
    display: block;
    width: var(--sc-reference-progress);
    height: 100%;
    border-radius: inherit;
    background: var(--sc-color-brand);
}

@media (max-width: 63.999rem) {
    .sc-reference-action-grid,
    .sc-reference-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-reference-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 47.999rem) {
    .sc-reference-action-grid,
    .sc-reference-filter-row,
    .sc-reference-form-grid,
    .sc-reference-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-reference-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-reference-tab {
        width: 100%;
    }

    .sc-reference-table-wrap {
        overflow: visible;
        border: 0;
    }

    .sc-reference-table,
    .sc-reference-table tbody,
    .sc-reference-table tr,
    .sc-reference-table td {
        display: block;
        width: 100%;
    }

    .sc-reference-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sc-reference-table tbody {
        display: grid;
        gap: var(--sc-space-3);
    }

    .sc-reference-table tr {
        overflow: hidden;
        border: 1px solid var(--sc-color-line);
        border-radius: var(--sc-radius-md);
        background: var(--sc-color-surface);
    }

    .sc-reference-table td {
        display: grid;
        grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.25fr);
        align-items: center;
        gap: var(--sc-space-3);
        min-height: var(--sc-target-min);
        padding: var(--sc-space-2) var(--sc-space-3);
        text-align: end;
    }

    .sc-reference-table td::before {
        content: attr(data-label);
        color: var(--sc-color-muted);
        font-size: var(--sc-text-xs);
        font-weight: 800;
        text-align: start;
        text-transform: uppercase;
    }

    .sc-reference-table td:last-child {
        border-bottom: 0;
    }

    .sc-reference-table td > * {
        justify-self: end;
    }

    .sc-reference-workspace__footer,
    .sc-reference-workspace__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-reference-workspace__actions .sc-action-button {
        width: 100%;
    }

    .sc-reference-bar-row__label {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--sc-space-1);
    }
}

@media (max-width: 23.999rem) {
    .sc-reference-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-reference-table td {
        grid-template-columns: minmax(0, 1fr);
        text-align: start;
    }

    .sc-reference-table td > * {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-reference-tab {
        scroll-behavior: auto;
        transition: none;
    }
}

/* SICERMAT compact Data Management launcher v1 (UI-05) */
.sc-data-management-page {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-5);
}

.sc-data-management-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

.sc-data-management-card {
    min-width: 0;
    min-height: 5.5rem;
    max-height: 5.5rem;
    align-items: center;
    gap: var(--sc-space-3);
    overflow: hidden;
    padding: var(--sc-space-3);
    box-shadow: none;
}

.sc-data-management-card .sc-action-card__header {
    align-self: center;
}

.sc-data-management-card .sc-action-card__icon {
    width: calc(var(--sc-icon-lg) + var(--sc-space-4));
    height: calc(var(--sc-icon-lg) + var(--sc-space-4));
    flex-basis: calc(var(--sc-icon-lg) + var(--sc-space-4));
}

.sc-data-management-card .sc-action-card__icon > svg {
    width: var(--sc-icon-lg);
    height: var(--sc-icon-lg);
}

.sc-data-management-card .sc-action-card__body {
    min-width: 0;
    gap: var(--sc-space-1);
}

.sc-data-management-card .sc-action-card__title {
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-tight);
}

.sc-data-management-card .sc-action-card__link::after {
    position: absolute;
    inset: 0;
    content: '';
}

.sc-data-management-card .sc-action-card__description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sc-data-management-card .sc-action-card__content:empty {
    display: none;
}

@media (max-width: 63.999rem) {
    .sc-data-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    .sc-data-management-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-data-management-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-data-management-card {
        transition: none;
    }
}

/* SICERMAT compact menu and contextual launchers v1 (UI-06) */
.sc-menu-launcher-page {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-5);
}

.sc-menu-launcher-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

.sc-menu-launcher-card {
    min-width: 0;
    min-height: 4.5rem;
    max-height: 4.5rem;
    align-items: center;
    gap: var(--sc-space-3);
    overflow: hidden;
    padding: var(--sc-space-3);
    box-shadow: none;
}

.sc-menu-launcher-card .sc-action-card__header {
    align-self: center;
}

.sc-menu-launcher-card .sc-action-card__icon {
    width: calc(var(--sc-icon-lg) + var(--sc-space-4));
    height: calc(var(--sc-icon-lg) + var(--sc-space-4));
    flex-basis: calc(var(--sc-icon-lg) + var(--sc-space-4));
}

.sc-menu-launcher-card .sc-action-card__icon > svg {
    width: var(--sc-icon-lg);
    height: var(--sc-icon-lg);
}

.sc-menu-launcher-card .sc-action-card__body {
    min-width: 0;
    align-content: center;
}

.sc-menu-launcher-card .sc-action-card__title {
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-tight);
}

.sc-menu-launcher-card .sc-action-card__link::after {
    position: absolute;
    inset: 0;
    content: '';
}

.sc-quick-launcher {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-3);
    margin-block-end: var(--sc-space-3);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-3);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-card);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-quick-launcher__header,
.sc-quick-launcher__heading,
.sc-quick-launcher__back {
    display: flex;
    align-items: center;
}

.sc-quick-launcher__header {
    min-width: 0;
    justify-content: space-between;
    gap: var(--sc-space-3);
}

.sc-quick-launcher__heading {
    min-width: 0;
    gap: var(--sc-space-2);
}

.sc-quick-launcher__heading > svg {
    width: var(--sc-icon-md);
    height: var(--sc-icon-md);
    flex: 0 0 var(--sc-icon-md);
    color: var(--sc-color-brand);
}

.sc-quick-launcher__eyebrow,
.sc-quick-launcher__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.sc-quick-launcher__eyebrow {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 700;
    line-height: var(--sc-leading-tight);
}

.sc-quick-launcher__title {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-quick-launcher__back {
    min-height: var(--sc-target-min);
    flex: 0 0 auto;
    justify-content: center;
    gap: var(--sc-space-2);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-xs);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
    text-decoration: none;
}

.sc-quick-launcher__back:hover {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
}

.sc-quick-launcher__back:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-quick-launcher__back > svg {
    width: var(--sc-icon-sm);
    height: var(--sc-icon-sm);
}

.sc-quick-launcher__grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-2);
}

.sc-quick-launcher__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 3.25rem;
    max-height: 3.25rem;
    align-items: center;
    gap: var(--sc-space-2);
    overflow: hidden;
    border: 1px solid var(--sc-color-line);
    padding: var(--sc-space-2);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    box-shadow: none;
    color: var(--sc-color-ink);
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.sc-quick-launcher__card:hover,
.sc-quick-launcher__card.is-active,
.sc-quick-launcher__card[aria-current='page'] {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
}

.sc-quick-launcher__card:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-quick-launcher__icon {
    display: grid;
    width: calc(var(--sc-icon-md) + var(--sc-space-3));
    height: calc(var(--sc-icon-md) + var(--sc-space-3));
    flex: 0 0 calc(var(--sc-icon-md) + var(--sc-space-3));
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
    place-items: center;
}

.sc-quick-launcher__icon > svg {
    width: var(--sc-icon-md);
    height: var(--sc-icon-md);
}

.sc-quick-launcher__label {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--sc-text-xs);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
}

@media (max-width: 63.999rem) {
    .sc-menu-launcher-grid,
    .sc-quick-launcher__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    .sc-menu-launcher-grid,
    .sc-quick-launcher__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-menu-launcher-card,
    .sc-quick-launcher__card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sc-quick-launcher__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-menu-launcher-card,
    .sc-quick-launcher__card,
    .sc-quick-launcher__back {
        transition: none;
    }
}

/* SICERMAT interface patterns v1 (UI-09) */
.sc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sc-form-field {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-2);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-form-field--wide {
    grid-column: 1 / -1;
}

.sc-form-field__label {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 750;
    line-height: var(--sc-leading-tight);
}

.sc-form-field__required,
.sc-form-field__error {
    color: var(--sc-color-danger);
}

.sc-form-field__control {
    min-width: 0;
}

.sc-form-field__control > :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: var(--sc-target-min);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font: inherit;
    line-height: var(--sc-leading-normal);
}

.sc-form-field__control > textarea {
    min-height: calc(var(--sc-target-min) * 2);
    resize: vertical;
}

.sc-form-field__control > :is(input, select, textarea):focus-visible {
    border-color: var(--sc-color-brand);
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-form-field--invalid .sc-form-field__control > :is(input, select, textarea) {
    border-color: var(--sc-color-danger);
}

.sc-form-field__hint,
.sc-form-field__error {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-readable);
}

.sc-form-field__hint {
    color: var(--sc-color-muted);
}

.sc-form-field__error {
    font-weight: 750;
}

.sc-data-table {
    min-width: 0;
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-data-table__viewport {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    overscroll-behavior-inline: contain;
}

.sc-data-table__viewport:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-data-table__table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
}

.sc-data-table__table :is(th, td) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sc-data-table--compact .sc-data-table__table :is(th, td) {
    padding-block: var(--sc-space-2);
}

.sc-reference-table-wrap.sc-data-table,
.rr-table-wrap.sc-data-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sc-reference-table-wrap.sc-data-table .sc-data-table__viewport,
.rr-table-wrap.sc-data-table .sc-data-table__viewport {
    border-radius: var(--sc-radius-md);
}

.sc-feedback-message {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sc-space-3);
    border: 1px solid var(--sc-color-info);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-4);
    background: var(--sc-color-info-soft);
    color: var(--sc-color-info);
    font-family: var(--sc-font-sans);
}

.sc-feedback-message--success {
    border-color: var(--sc-color-success);
    background: var(--sc-color-success-soft);
    color: var(--sc-color-success);
}

.sc-feedback-message--warning {
    border-color: var(--sc-color-warning);
    background: var(--sc-color-warning-soft);
    color: var(--sc-color-warning);
}

.sc-feedback-message--danger {
    border-color: var(--sc-color-danger);
    background: var(--sc-color-danger-soft);
    color: var(--sc-color-danger);
}

.sc-feedback-message--loading {
    border-color: var(--sc-color-info);
    background: var(--sc-color-info-soft);
    color: var(--sc-color-info);
}

.sc-feedback-message--compact {
    gap: var(--sc-space-2);
    padding: var(--sc-space-3);
}

.sc-feedback-message__marker {
    display: inline-grid;
    width: var(--sc-icon-lg);
    height: var(--sc-icon-lg);
    border: 1px solid currentColor;
    border-radius: var(--sc-radius-pill);
    place-items: center;
    font-size: var(--sc-text-sm);
    font-weight: 800;
}

.sc-feedback-message__spinner {
    width: var(--sc-icon-sm);
    height: var(--sc-icon-sm);
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--sc-radius-pill);
    animation: sc-pattern-spin .8s linear infinite;
}

.sc-feedback-message__copy {
    min-width: 0;
}

.sc-feedback-message__title,
.sc-feedback-message__description,
.sc-feedback-message__description > :first-child,
.sc-feedback-message__description > :last-child {
    margin: 0;
}

.sc-feedback-message__title {
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-feedback-message__description {
    margin-top: var(--sc-space-1);
    overflow-wrap: anywhere;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    min-width: 0;
    padding: var(--sc-space-4);
    overflow-y: auto;
    background: color-mix(in srgb, var(--sc-color-ink) 62%, transparent);
    place-items: center;
}

.sc-modal {
    display: grid;
    width: 100%;
    max-height: calc(100dvh - (var(--sc-space-4) * 2));
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    box-shadow: var(--sc-shadow-card);
    font-family: var(--sc-font-sans);
}

.sc-modal--sm { max-width: 30rem; }
.sc-modal--md { max-width: 42rem; }
.sc-modal--lg { max-width: 56rem; }
.sc-modal--xl { max-width: 72rem; }

.sc-modal__header,
.sc-modal__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5) var(--sc-space-6);
}

.sc-modal__header {
    border-bottom: 1px solid var(--sc-color-line);
}

.sc-modal__heading {
    min-width: 0;
}

.sc-modal__title,
.sc-modal__description {
    margin: 0;
    overflow-wrap: anywhere;
}

.sc-modal__title {
    font-size: var(--sc-text-xl);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-modal__description {
    max-width: 68ch;
    margin-top: var(--sc-space-2);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-modal__close {
    display: inline-grid;
    width: var(--sc-target-min);
    height: var(--sc-target-min);
    flex: 0 0 var(--sc-target-min);
    border: 0;
    border-radius: var(--sc-radius-md);
    background: transparent;
    color: var(--sc-color-muted);
    place-items: center;
    font-size: var(--sc-text-xl);
    line-height: 1;
}

.sc-modal__close:hover {
    background: var(--sc-color-canvas);
    color: var(--sc-color-ink);
}

.sc-modal__close:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-modal__body {
    min-width: 0;
    padding: var(--sc-space-6);
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.sc-modal__footer {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--sc-color-line);
    background: var(--sc-color-canvas);
}

@keyframes sc-pattern-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 47.999rem) {
    .sc-modal-layer {
        padding: var(--sc-space-2);
        place-items: end center;
    }

    .sc-modal {
        max-height: calc(100dvh - (var(--sc-space-2) * 2));
    }

    .sc-modal__header,
    .sc-modal__body,
    .sc-modal__footer {
        padding: var(--sc-space-4);
    }

    .sc-modal__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sc-modal__footer > * {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-feedback-message__spinner {
        animation-duration: 1.6s;
        animation-timing-function: steps(2, end);
    }
}

/* SICERMAT KRS readability hotfix (UI-09) */
.sc-krs-process {
    min-width: 0;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    background: var(--sc-color-canvas);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-krs-process__title {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--sc-text-md);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-krs-process__steps {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
}

.sc-krs-process__step {
    min-width: 0;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-4);
    background: var(--sc-color-surface);
}

.sc-krs-process__heading {
    display: grid;
    min-width: 0;
    grid-template-columns: var(--sc-target-min) minmax(0, 1fr);
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-krs-process__number {
    display: inline-grid;
    width: var(--sc-target-min);
    height: var(--sc-target-min);
    border-radius: var(--sc-radius-pill);
    background: var(--sc-color-brand);
    color: var(--sc-color-surface);
    place-items: center;
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: 1;
}

.sc-krs-process__step-title,
.sc-krs-process__description {
    overflow-wrap: anywhere;
}

.sc-krs-process__step-title {
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-normal);
}

.sc-krs-process__description {
    margin: var(--sc-space-3) 0 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-krs-mode-tabs {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

.sc-krs-mode-tab {
    display: grid;
    min-width: 0;
    min-height: 7.5rem;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: var(--sc-space-2);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    text-align: left;
    box-shadow: var(--sc-shadow-card);
}

.sc-krs-mode-tab:hover {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-canvas);
}

.sc-krs-mode-tab[aria-selected="true"] {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
    box-shadow: inset .3rem 0 0 var(--sc-color-brand), var(--sc-shadow-card);
}

.sc-krs-mode-tab__eyebrow {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: var(--sc-leading-tight);
    text-transform: uppercase;
}

.sc-krs-mode-tab[aria-selected="true"] .sc-krs-mode-tab__eyebrow,
.sc-krs-mode-tab[aria-selected="true"] .sc-krs-mode-tab__title {
    color: var(--sc-color-brand-strong);
}

.sc-krs-mode-tab__title {
    overflow-wrap: anywhere;
    font-size: var(--sc-text-md);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-krs-mode-tab__description {
    overflow-wrap: anywhere;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-krs-transfer {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.sc-krs-transfer__panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
}

.sc-krs-transfer__panel--selected {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
}

.sc-krs-transfer__header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-3);
    border-bottom: 1px solid var(--sc-color-line);
    padding: var(--sc-space-4);
    background: var(--sc-color-canvas);
}

.sc-krs-transfer__header > div {
    min-width: 0;
}

.sc-krs-transfer__title {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-md);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-krs-transfer__description {
    margin: var(--sc-space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-krs-transfer__count {
    flex: 0 0 auto;
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-1) var(--sc-space-3);
    background: var(--sc-color-info-soft);
    color: var(--sc-color-info);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    line-height: var(--sc-leading-normal);
    white-space: nowrap;
}

.sc-krs-transfer__count--selected {
    background: var(--sc-color-success-soft);
    color: var(--sc-color-success);
}

.sc-krs-transfer__toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--sc-space-2);
    border-bottom: 1px solid var(--sc-color-line);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-color-surface);
}

.sc-krs-transfer__toolbar--end {
    justify-content: flex-end;
}

.sc-krs-transfer__search {
    min-width: 8rem;
    flex: 1 1 auto;
}

.sc-krs-transfer__search input {
    width: 100%;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
}

.sc-krs-transfer__secondary-action,
.sc-krs-transfer__danger-action {
    flex: 0 0 auto;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    font-size: var(--sc-text-sm);
    font-weight: 800;
    line-height: var(--sc-leading-normal);
}

.sc-krs-transfer__secondary-action {
    color: var(--sc-color-brand-strong);
}

.sc-krs-transfer__danger-action {
    color: var(--sc-color-danger);
}

.sc-krs-transfer__secondary-action:hover:not(:disabled) {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
}

.sc-krs-transfer__danger-action:hover:not(:disabled) {
    border-color: var(--sc-color-danger);
    background: var(--sc-color-danger-soft);
}

.sc-krs-transfer__secondary-action:disabled,
.sc-krs-transfer__danger-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.sc-krs-transfer__list {
    min-height: 12rem;
    max-height: 24rem;
    overflow-y: auto;
    padding: var(--sc-space-2);
    overscroll-behavior: contain;
}

.sc-krs-transfer__item {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sc-space-3);
    border: 1px solid transparent;
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-3);
    background: transparent;
    color: var(--sc-color-ink);
    text-align: left;
}

.sc-krs-transfer__item + .sc-krs-transfer__item {
    margin-top: var(--sc-space-1);
}

.sc-krs-transfer__item:hover {
    border-color: var(--sc-color-line);
    background: var(--sc-color-canvas);
}

.sc-krs-transfer__item--selected {
    border-color: var(--sc-color-line);
    background: var(--sc-color-surface);
}

.sc-krs-transfer__checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--sc-color-brand);
    pointer-events: none;
}

.sc-krs-transfer__item-label {
    display: grid;
    min-width: 0;
    gap: var(--sc-space-1);
    overflow-wrap: anywhere;
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
}

.sc-krs-transfer__item-label strong {
    color: var(--sc-color-brand-strong);
    font-family: var(--sc-font-mono);
    font-size: var(--sc-text-xs);
}

.sc-krs-transfer__item-label small {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
}

.sc-krs-transfer__item-action {
    color: var(--sc-color-brand-strong);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    white-space: nowrap;
}

.sc-krs-transfer__item-action--remove {
    color: var(--sc-color-danger);
}

.sc-krs-transfer__empty {
    display: grid;
    min-height: 10rem;
    padding: var(--sc-space-6);
    color: var(--sc-color-muted);
    place-items: center;
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
    text-align: center;
}

.sc-krs-pagination-wrap {
    min-width: 0;
    border-top: 1px solid var(--sc-color-line);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-color-canvas);
}

.sc-pagination {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-4);
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
}

.sc-pagination__summary {
    margin: 0;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
}

.sc-pagination__controls,
.sc-pagination__pages {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--sc-space-1);
}

.sc-pagination__action,
.sc-pagination__page {
    display: inline-flex;
    min-width: var(--sc-target-min);
    min-height: var(--sc-target-min);
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-1);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 750;
    line-height: var(--sc-leading-normal);
    text-decoration: none;
}

.sc-pagination__page {
    padding-inline: var(--sc-space-2);
}

.sc-pagination__action:hover,
.sc-pagination__page:hover {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
}

.sc-pagination__action:focus-visible,
.sc-pagination__page:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-pagination__page--current {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand);
    color: var(--sc-color-surface);
}

.sc-pagination__action--disabled {
    cursor: not-allowed;
    opacity: .55;
}

.sc-pagination__ellipsis {
    display: inline-grid;
    min-width: var(--sc-space-6);
    min-height: var(--sc-target-min);
    color: var(--sc-color-muted);
    place-items: center;
}

.sc-pagination__mobile-page {
    display: none;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
    text-align: center;
}

@media (max-width: 63.999rem) {
    .sc-krs-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-krs-transfer {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-pagination__summary {
        text-align: center;
    }

    .sc-pagination__controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 47.999rem) {
    .sc-krs-process__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-krs-mode-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-krs-mode-tab {
        min-height: 0;
        padding: var(--sc-space-4);
    }

    .sc-krs-transfer__header,
    .sc-krs-transfer__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-krs-transfer__toolbar--end {
        align-items: flex-end;
    }

    .sc-krs-transfer__count,
    .sc-krs-transfer__secondary-action,
    .sc-krs-transfer__danger-action {
        width: 100%;
        text-align: center;
    }

    .sc-krs-transfer__item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sc-krs-transfer__item-action {
        grid-column: 2;
        white-space: normal;
    }

    .sc-krs-pagination-wrap {
        padding-inline: var(--sc-space-3);
    }

    .sc-pagination__controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        width: 100%;
    }

    .sc-pagination__action {
        padding-inline: var(--sc-space-2);
    }

    .sc-pagination__pages {
        display: none;
    }

    .sc-pagination__mobile-page {
        display: inline;
    }
}

/* Analisis Ketercapaian CPL readability hotfix (post UI-10) */
.sc-cpl-competency-wrap,
.sc-cpl-competency-section,
.sc-cpl-competency-grid,
.sc-cpl-competency-card,
.sc-cpl-analysis-panel,
.sc-cpl-analysis-filters,
.sc-searchable-filter {
    min-width: 0;
    box-sizing: border-box;
}

.sc-cpl-competency-section {
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-5);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
}

.sc-cpl-competency-section__header {
    margin-bottom: var(--sc-space-4);
}

.sc-cpl-competency-section__title,
.sc-cpl-analysis-panel__title {
    margin: 0;
    color: var(--sc-color-ink);
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-cpl-competency-section__title {
    font-size: var(--sc-text-md);
    letter-spacing: .01em;
}

.sc-cpl-competency-section__description,
.sc-cpl-analysis-panel__description,
.sc-cpl-analysis-panel__hint {
    overflow-wrap: anywhere;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-readable);
}

.sc-cpl-competency-section__description,
.sc-cpl-analysis-panel__description {
    max-width: 78ch;
    margin: var(--sc-space-1) 0 0;
}

.sc-cpl-competency-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--sc-space-3);
}

.sc-cpl-competency-card {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
    border: 1px solid var(--sc-cpl-tone);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-4);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-cpl-tone-soft));
}

.sc-cpl-competency-card__content,
.sc-cpl-competency-card__summary,
.sc-cpl-competency-card__metrics {
    min-width: 0;
}

.sc-cpl-competency-card__label {
    overflow-wrap: anywhere;
    color: var(--sc-cpl-tone);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1.45;
    text-transform: uppercase;
}

.sc-cpl-competency-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-3);
}

.sc-cpl-competency-card__tag {
    display: inline-flex;
    max-width: 100%;
    min-height: 1.75rem;
    align-items: center;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-pill);
    padding: var(--sc-space-1) var(--sc-space-2);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-xs);
    font-weight: 700;
    line-height: var(--sc-leading-normal);
    overflow-wrap: anywhere;
}

.sc-cpl-competency-card__tag--empty {
    border-style: dashed;
    color: var(--sc-color-muted);
}

.sc-cpl-competency-card__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: var(--sc-space-3);
    border-top: 1px solid var(--sc-color-line);
    padding-top: var(--sc-space-3);
}

.sc-cpl-competency-card__average {
    display: flex;
    min-width: 5.6rem;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.sc-cpl-competency-card__average-label {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 700;
    line-height: var(--sc-leading-normal);
}

.sc-cpl-competency-card__value {
    color: var(--sc-cpl-tone);
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 850;
    line-height: 1.05;
}

.sc-cpl-competency-card__metrics {
    display: grid;
    gap: var(--sc-space-1);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-normal);
    text-align: right;
}

.sc-cpl-competency-card__metric {
    overflow-wrap: anywhere;
}

.sc-cpl-competency-card__metric:first-child {
    color: var(--sc-color-ink);
    font-weight: 750;
}

.sc-cpl-competency-empty {
    grid-column: 1 / -1;
    border: 1px dashed var(--sc-color-line);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-5);
    color: var(--sc-color-muted);
    text-align: center;
}

.sc-cpl-analysis-panel {
    display: grid;
    gap: var(--sc-space-4);
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-5);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
}

.sc-cpl-analysis-panel__header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-4);
}

.sc-cpl-analysis-panel__intro {
    min-width: 0;
}

.sc-cpl-analysis-panel__title {
    font-size: var(--sc-text-lg);
}

.sc-cpl-analysis-panel__back {
    display: inline-flex;
    min-height: var(--sc-target-min);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-canvas);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 700;
    line-height: var(--sc-leading-normal);
    text-decoration: none;
}

.sc-cpl-analysis-panel__back:hover {
    border-color: var(--sc-color-brand);
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
}

.sc-cpl-analysis-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--sc-space-4);
}

.sc-cpl-analysis-panel__hint {
    margin: 0;
    border-top: 1px solid var(--sc-color-line);
    padding-top: var(--sc-space-3);
}

.sc-searchable-filter {
    position: relative;
    isolation: isolate;
}

.sc-searchable-filter:focus-within {
    z-index: 40;
}

.sc-searchable-filter__label {
    display: block;
    margin: 0 0 var(--sc-space-2);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 750;
    line-height: var(--sc-leading-normal);
}

.sc-searchable-filter__control {
    position: relative;
    min-width: 0;
}

.sc-searchable-filter__input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--sc-target-min);
    box-sizing: border-box;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) 5.75rem var(--sc-space-2) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
    text-overflow: ellipsis;
}

.fi [data-searchable-filter] .sc-searchable-filter__input {
    height: var(--sc-target-min);
    min-height: var(--sc-target-min);
    padding: var(--sc-space-2) 5.75rem var(--sc-space-2) var(--sc-space-3);
}

.sc-searchable-filter__input::placeholder {
    color: var(--sc-color-muted);
    opacity: .82;
}

.sc-searchable-filter__input:focus {
    border-color: var(--sc-color-brand);
    outline: none;
    box-shadow: var(--sc-focus-ring);
}

.sc-searchable-filter__clear,
.sc-searchable-filter__toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-grid;
    width: var(--sc-target-min);
    min-width: var(--sc-target-min);
    min-height: var(--sc-target-min);
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--sc-color-muted);
    cursor: pointer;
}

.fi [data-searchable-filter] .sc-searchable-filter__clear,
.fi [data-searchable-filter] .sc-searchable-filter__toggle {
    top: 0;
    bottom: 0;
    height: var(--sc-target-min);
    min-height: var(--sc-target-min);
}

.sc-searchable-filter__clear {
    right: var(--sc-target-min);
    font-size: 1.25rem;
    line-height: 1;
}

.sc-searchable-filter__toggle {
    right: 0;
    border-left: 1px solid var(--sc-color-line);
}

.sc-searchable-filter__toggle svg {
    width: var(--sc-icon-sm);
    height: var(--sc-icon-sm);
}

.sc-searchable-filter__clear:hover,
.sc-searchable-filter__toggle:hover {
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
}

.sc-searchable-filter__menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + var(--sc-space-1));
    right: 0;
    left: 0;
    width: 100%;
    max-height: 16rem;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-1) 0;
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-card);
}

.sc-searchable-filter__option {
    display: block;
    width: 100%;
    min-height: var(--sc-target-min);
    border: 0;
    padding: var(--sc-space-2) var(--sc-space-3);
    background: transparent;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
    text-align: left;
    overflow-wrap: anywhere;
}

.sc-searchable-filter__option:hover,
.sc-searchable-filter__option:focus-visible {
    background: var(--sc-color-accent-soft);
    color: var(--sc-color-ink);
}

.sc-searchable-filter__option--placeholder,
.sc-searchable-filter__empty {
    color: var(--sc-color-muted);
}

.sc-searchable-filter__empty {
    padding: var(--sc-space-3);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
}

@media (max-width: 79.999rem) {
    .sc-cpl-competency-grid,
    .sc-cpl-analysis-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    .sc-cpl-competency-section,
    .sc-cpl-analysis-panel {
        padding: var(--sc-space-4);
    }

    .sc-cpl-competency-grid,
    .sc-cpl-analysis-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-cpl-competency-card__summary {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-cpl-competency-card__metrics {
        text-align: left;
    }

    .sc-cpl-analysis-panel__header {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-cpl-analysis-panel__back {
        width: 100%;
    }
}

/* SICERMAT centralized theme contract v1 (UI-11) */
.sc-sidebar-brand {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-5) var(--sc-space-3) var(--sc-space-4);
    color: var(--sc-color-on-brand);
    text-align: center;
}

.sc-sidebar-brand__university {
    color: inherit;
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-xl);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: var(--sc-leading-normal);
    text-transform: uppercase;
}

.sc-sidebar-brand .app-sidebar-brand-logo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

.sc-sidebar-brand__identity {
    line-height: var(--sc-leading-tight);
    text-align: center;
}

.sc-sidebar-brand__name {
    color: inherit;
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-lg);
    font-weight: 800;
    letter-spacing: .04em;
}

.sc-sidebar-brand__slogan {
    margin-top: var(--sc-space-1);
    color: color-mix(in srgb, var(--sc-color-on-brand) 74%, transparent);
    font-size: .625rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sc-login-logo {
    display: flex;
    justify-content: center;
    padding-bottom: var(--sc-space-4);
}

.sc-login-logo img {
    width: 9.375rem;
    height: 9.375rem;
    object-fit: contain;
}

.sc-panel-footer__text,
.sc-panel-footer__copyright {
    line-height: var(--sc-leading-readable);
}

.sc-panel-footer__text {
    color: var(--sc-color-brand);
    font-size: var(--sc-text-md);
    font-weight: 650;
}

.sc-panel-footer__copyright {
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 700;
}

.sc-panel-footer__copyright--link {
    transition: opacity .15s ease;
}

.sc-panel-footer__copyright--link:hover {
    opacity: .8;
}

.sc-unit-identity-banner__text {
    min-width: 0;
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-xl);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sc-topbar-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--sc-space-1);
    border-right: 1px solid var(--sc-color-line);
    padding: 0 var(--sc-space-5) 0 var(--sc-space-1);
    line-height: var(--sc-leading-tight);
}

.sc-topbar-identity__title,
.sc-topbar-identity__subtitle {
    max-width: min(42vw, 48rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-topbar-identity__title {
    color: var(--sc-color-ink);
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-xl);
    font-weight: 800;
}

.sc-topbar-identity__title--xl {
    font-size: clamp(var(--sc-text-xl), 1.7vw, 1.625rem);
}

.sc-topbar-identity__subtitle {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-sm);
}

.sc-topbar-identity__subtitle--prominent {
    font-size: var(--sc-text-lg);
}

.sc-topbar-user-card {
    display: flex;
    min-width: 0;
    align-items: center;
    padding-right: var(--sc-space-1);
}

.sc-topbar-user-card__avatar {
    display: grid;
    width: var(--sc-density-compact-control);
    height: var(--sc-density-compact-control);
    flex: 0 0 var(--sc-density-compact-control);
    place-items: center;
    margin-right: var(--sc-space-2);
    border-radius: var(--sc-radius-pill);
    background: var(--sc-color-brand);
    color: var(--sc-color-on-brand);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .03em;
}

.sc-topbar-user-card__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin-right: var(--sc-space-4);
    border-right: 1px solid var(--sc-color-line);
    padding-right: var(--sc-space-4);
    line-height: 1.3;
}

.sc-topbar-user-card__name {
    max-width: 11.25rem;
    overflow: hidden;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-topbar-user-card__role {
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    white-space: nowrap;
}

.sc-topbar-user-card__form {
    margin: 0;
    padding: 0;
}

.sc-topbar-user-card__action {
    display: inline-flex;
    min-height: var(--sc-target-min);
    align-items: center;
    gap: var(--sc-space-1);
    border: 0;
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-2) var(--sc-space-3);
    background: transparent;
    color: var(--sc-color-ink);
    font-size: var(--sc-text-sm);
    line-height: var(--sc-leading-normal);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.sc-topbar-user-card__button {
    cursor: pointer;
}

.sc-topbar-user-card__action:hover {
    background: var(--sc-color-brand-soft);
    color: var(--sc-color-brand-strong);
}

.sc-topbar-user-card__icon {
    width: var(--sc-icon-sm);
    height: var(--sc-icon-sm);
    flex: 0 0 var(--sc-icon-sm);
}

.sc-assessment-levels {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    white-space: nowrap;
}

.sc-assessment-levels__item {
    display: inline-flex;
    min-height: var(--sc-target-min);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-color-line);
    border-radius: var(--sc-radius-sm);
    padding: var(--sc-space-1) var(--sc-space-3);
    background: var(--sc-color-surface);
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    font-weight: 700;
    line-height: var(--sc-leading-tight);
    text-decoration: none;
}

.sc-assessment-levels__item--cpmk.sc-assessment-levels__item--active {
    border-color: var(--sc-color-success);
    background: var(--sc-color-success-soft);
    color: var(--sc-color-success);
}

.sc-assessment-levels__item--sub-cpmk.sc-assessment-levels__item--active {
    border-color: var(--sc-color-warning);
    background: var(--sc-color-warning-soft);
    color: var(--sc-color-warning);
}

.sc-overview-stat {
    --sc-overview-tone: var(--sc-color-info);
    --sc-overview-soft: var(--sc-color-info-soft);
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: var(--sc-space-2);
    border-left: var(--sc-space-1) solid var(--sc-overview-tone);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-5) var(--sc-space-5) var(--sc-space-5) var(--sc-space-4);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-overview-soft));
    box-shadow: var(--sc-shadow-card);
}

.sc-overview-stat--indigo,
.sc-overview-stat--purple {
    --sc-overview-tone: var(--sc-color-accent-strong);
    --sc-overview-soft: var(--sc-color-accent-soft);
}

.sc-overview-stat--green {
    --sc-overview-tone: var(--sc-color-success);
    --sc-overview-soft: var(--sc-color-success-soft);
}

.sc-overview-stat--gray {
    --sc-overview-tone: var(--sc-color-muted);
    --sc-overview-soft: var(--sc-color-canvas);
}

.sc-overview-stat--yellow {
    --sc-overview-tone: var(--sc-color-warning);
    --sc-overview-soft: var(--sc-color-warning-soft);
}

.sc-overview-stat--rose {
    --sc-overview-tone: var(--sc-color-danger);
    --sc-overview-soft: var(--sc-color-danger-soft);
}

.sc-overview-stat--teal {
    --sc-overview-tone: var(--sc-color-brand);
    --sc-overview-soft: var(--sc-color-brand-soft);
}

.sc-overview-stat__icon {
    position: absolute;
    top: -.75rem;
    right: var(--sc-space-3);
    font-size: 3rem;
    line-height: 1;
    opacity: .12;
}

.sc-overview-stat__label {
    color: var(--sc-overview-tone);
    font-size: var(--sc-text-xs);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sc-overview-stat__value {
    color: var(--sc-overview-tone);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.sc-cpl-tone--info {
    --sc-cpl-tone: var(--sc-color-info);
    --sc-cpl-tone-soft: var(--sc-color-info-soft);
}

.sc-cpl-tone--success {
    --sc-cpl-tone: var(--sc-color-success);
    --sc-cpl-tone-soft: var(--sc-color-success-soft);
}

.sc-cpl-tone--warning {
    --sc-cpl-tone: var(--sc-color-warning);
    --sc-cpl-tone-soft: var(--sc-color-warning-soft);
}

.sc-cpl-tone--danger {
    --sc-cpl-tone: var(--sc-color-danger);
    --sc-cpl-tone-soft: var(--sc-color-danger-soft);
}

.sc-cpl-tone--accent {
    --sc-cpl-tone: var(--sc-color-accent-strong);
    --sc-cpl-tone-soft: var(--sc-color-accent-soft);
}

.sc-cpl-tone--teal {
    --sc-cpl-tone: var(--sc-color-brand);
    --sc-cpl-tone-soft: var(--sc-color-brand-soft);
}

.sc-cpl-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-6);
}

.sc-cpl-summary-card,
.sc-cpl-lecturer-metric {
    min-width: 0;
    border: 1px solid var(--sc-cpl-tone);
    border-radius: var(--sc-radius-md);
    padding: var(--sc-space-4);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-cpl-tone-soft));
}

.sc-cpl-summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.sc-cpl-summary-card__header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-cpl-summary-card__icon {
    flex: 0 0 auto;
    font-size: var(--sc-icon-md);
}

.sc-cpl-summary-card__label,
.sc-cpl-lecturer-metric__label {
    overflow-wrap: anywhere;
    color: var(--sc-cpl-tone);
    font-size: var(--sc-text-xs);
    font-weight: 750;
    letter-spacing: .05em;
    line-height: var(--sc-leading-tight);
    text-transform: uppercase;
}

.sc-cpl-summary-card__value,
.sc-cpl-lecturer-metric__value {
    color: var(--sc-cpl-tone);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: var(--sc-leading-tight);
}

.sc-cpl-summary-card__meta {
    overflow-wrap: anywhere;
    color: var(--sc-color-muted);
    font-size: var(--sc-text-xs);
    line-height: var(--sc-leading-normal);
}

.sc-cpl-competency-card {
    border-color: var(--sc-cpl-tone);
    background: linear-gradient(135deg, var(--sc-color-surface), var(--sc-cpl-tone-soft));
}

.sc-cpl-competency-card__label,
.sc-cpl-competency-card__value {
    color: var(--sc-cpl-tone);
}

.sc-cpl-student-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    align-items: stretch;
    gap: var(--sc-space-4);
}

.sc-cpl-student-metric {
    border-color: var(--sc-color-line);
    background: var(--sc-color-canvas);
    color: var(--sc-color-ink);
}

.sc-cpl-student-metric--info {
    border-color: var(--sc-color-info);
    background: var(--sc-color-info-soft);
}

.sc-cpl-student-metric--success {
    border-color: var(--sc-color-success);
    background: var(--sc-color-success-soft);
}

.sc-cpl-student-metric--warning {
    border-color: var(--sc-color-warning);
    background: var(--sc-color-warning-soft);
}

.sc-cpl-student-metric--accent {
    border-color: var(--sc-color-accent);
    background: var(--sc-color-accent-soft);
}

.sc-cpl-student-metric__label {
    color: var(--sc-color-muted);
}

@media (max-width: 79.999rem) {
    .sc-cpl-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 63.999rem) {
    .sc-topbar-identity__subtitle,
    .sc-topbar-user-card__identity {
        display: none;
    }

    .sc-cpl-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    .sc-sidebar-brand__university {
        font-size: var(--sc-text-lg);
    }

    .sc-topbar-identity {
        border-right: 0;
        padding-right: var(--sc-space-2);
    }

    .sc-topbar-identity__title,
    .sc-topbar-identity__title--xl {
        max-width: 38vw;
        font-size: var(--sc-text-md);
    }

    .sc-topbar-identity__subtitle--prominent,
    .sc-topbar-user-card__action {
        font-size: var(--sc-text-xs);
    }

    .sc-topbar-user-card__avatar {
        display: none;
    }

    .sc-topbar-user-card__action {
        padding-inline: var(--sc-space-2);
    }

    .sc-cpl-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-panel-footer__copyright--link,
    .sc-topbar-user-card__action {
        transition: none;
    }
}

/* SICERMAT responsive and overflow contract v1 (UI-12) */
.fi-main,
.fi-main-ctn,
.fi-page,
.fi-page-content,
.sc-responsive-surface {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sc-responsive-surface :is(.fi-section, .fi-section-content, .sc-section, .sc-section__content) {
    min-width: 0;
    max-width: 100%;
}

.sc-data-management-grid,
.sc-menu-launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-quick-launcher__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sc-responsive-table,
[data-responsive-strategy='contained-scroll'],
.fi-ta-ctn {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    overscroll-behavior-inline: contain;
}

.sc-responsive-table:focus-visible,
[data-responsive-strategy='contained-scroll']:focus-visible {
    outline: var(--sc-focus-width) solid var(--sc-color-brand);
    outline-offset: var(--sc-focus-offset);
    box-shadow: var(--sc-focus-ring);
}

.sc-responsive-table > table {
    width: 100%;
    min-width: 42rem;
}

.sc-responsive-table :is(th, td),
.fi-ta-cell,
.fi-ta-text-item-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 63.999rem) {
    .sc-data-management-grid,
    .sc-menu-launcher-grid,
    .sc-quick-launcher__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    .sc-data-management-grid,
    .sc-menu-launcher-grid,
    .sc-quick-launcher__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-responsive-strategy='stacked-cards'] {
        overflow: visible;
    }

    [data-responsive-strategy='stacked-cards'] table,
    [data-responsive-strategy='stacked-cards'] tbody,
    [data-responsive-strategy='stacked-cards'] tr,
    [data-responsive-strategy='stacked-cards'] td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    [data-responsive-strategy='stacked-cards'] thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    [data-responsive-strategy='stacked-cards'] tr {
        overflow: hidden;
        border: 1px solid var(--sc-color-line);
        border-radius: var(--sc-radius-md);
        background: var(--sc-color-surface);
    }

    [data-responsive-strategy='stacked-cards'] tr + tr {
        margin-top: var(--sc-space-3);
    }

    [data-responsive-strategy='stacked-cards'] td {
        display: grid;
        grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.25fr);
        gap: var(--sc-space-3);
        overflow-wrap: anywhere;
        text-align: start;
    }

    [data-responsive-strategy='stacked-cards'] td::before {
        color: var(--sc-color-muted);
        content: attr(data-label);
        font-size: var(--sc-text-xs);
        font-weight: 750;
    }
}