:root {
    --bg: #f3eee5;
    --header: #213246;
    --header-dark: #182536;
    --sidebar: #fbf8f2;
    --panel: #ffffff;
    --text: #20262d;
    --muted: #66727f;
    --line: #d5cabc;
    --line-soft: #ece3d7;
    --primary: #2f5d7c;
    --primary-dark: #254b65;
    --danger: #a12621;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topbar {
    align-items: center;
    background: var(--header);
    border-bottom: 1px solid var(--header-dark);
    color: #ffffff;
    display: flex;
    height: 52px;
    justify-content: space-between;
    padding: 0 18px;
}

.brand {
    align-items: baseline;
    color: #ffffff;
    display: inline-flex;
    gap: 12px;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.brand-text {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
    color: #dbe3ea;
    font-size: 13px;
    padding-inline-start: 12px;
}

.userbar {
    align-items: center;
    display: flex;
    gap: 12px;
    font-size: 13px;
}

.userbar form {
    margin: 0;
}

.userbar button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    min-height: 28px;
    padding: 3px 9px;
}

.userbar button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: calc(100vh - 52px);
}

.sidebar {
    background: var(--sidebar);
    border-inline-end: 1px solid var(--line);
    padding: 16px 0;
}

.side-nav {
    display: grid;
}

.side-nav a {
    border-bottom: 1px solid var(--line-soft);
    color: #263747;
    display: block;
    padding: 10px 18px;
}

.side-nav a:first-child {
    border-top: 1px solid var(--line-soft);
}

.side-nav a:hover {
    background: #e8edf2;
    color: var(--header-dark);
    text-decoration: none;
}

.page {
    padding: 18px 26px 34px;
}

.page-title {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.page-title h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}

.page-title p,
.content-panel p {
    color: var(--muted);
    margin: 0;
}

.status-box {
    background: #ffffff;
    border: 1px solid var(--line);
    min-width: 180px;
    padding: 9px 12px;
}

.status-box span {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.status-box strong {
    display: block;
    font-size: 15px;
}

.metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 18px;
}

.metrics article,
.content-panel {
    background: var(--panel);
    border: 1px solid var(--line);
}

.metrics article {
    padding: 12px;
}

.metrics span {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.metrics strong {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

.content-panel {
    box-shadow: 0 1px 0 rgba(24, 37, 54, 0.04);
    padding: 14px;
}

.section-upload,
.section-review,
.section-records,
.section-group,
.section-links {
    border-inline-start-width: 4px;
}

.section-upload {
    border-inline-start-color: #627487;
}

.section-review {
    background: #fbfcfd;
    border-inline-start-color: #2f5d7c;
}

.section-records {
    border-inline-start-color: #6f7d58;
}

.section-group {
    border-inline-start-color: #8a7a4f;
}

.section-links {
    border-inline-start-color: #755f7f;
}

.content-panel h2 {
    font-size: 17px;
    margin: 0 0 6px;
}

.content-panel h3 {
    background: linear-gradient(#f9fafb, #edf1f5);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    margin: -14px -14px 0;
    padding: 9px 10px;
}

.section-review h3 {
    background: #edf3f7;
}

.section-records h3 {
    background: #f1f4ed;
}

.section-group h3 {
    background: #f5f1e7;
}

.section-links h3 {
    background: #f1edf4;
}

.collapsible-panel {
    border: 1px solid #bfccd8;
    border-inline-start-width: 4px;
    box-shadow: 0 1px 2px rgba(24, 37, 54, 0.08);
    padding: 0;
}

.collapsible-panel summary {
    align-items: center;
    background: linear-gradient(#f9fafb, #edf1f5);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: flex-start;
    list-style: none;
    padding: 9px 10px;
}

.collapsible-panel summary::-webkit-details-marker {
    display: none;
}

.collapsible-panel summary::before {
    color: var(--muted);
    content: "+";
    font-weight: 700;
    margin-inline-end: 8px;
}

.collapsible-panel[open] summary::before {
    content: "-";
}

.collapsible-panel summary span {
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    margin-inline-start: auto;
    min-width: 28px;
    padding: 1px 7px;
    text-align: center;
}

.section-review summary,
.section-review h3 {
    background: linear-gradient(#f4f8fb, #e6eef5);
}

.section-records summary,
.section-records h3 {
    background: linear-gradient(#f7f9f4, #ecf1e7);
}

.section-group summary,
.section-group h3 {
    background: linear-gradient(#faf7ed, #f0eadc);
}

.section-links summary,
.section-links h3 {
    background: linear-gradient(#f8f4fa, #eee7f2);
}

.page-subtitle h2 {
    background: #f7f9fb;
    border: 1px solid var(--line);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding: 10px 12px;
}

.action-panel {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.button {
    border: 1px solid var(--line);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    justify-content: center;
    min-height: 32px;
    padding: 6px 13px;
}

.button.primary {
    background: linear-gradient(#356a8d, var(--primary));
    border-color: var(--primary-dark);
    color: white;
}

.button.primary:hover {
    background: var(--primary-dark);
    text-decoration: none;
}

.button.danger {
    background: #fff3f2;
    border-color: #d0a3a0;
    color: var(--danger);
}

.button.danger:hover {
    background: #f3d8d6;
}

.icon-button {
    align-items: center;
    font-size: 20px;
    line-height: 1;
    min-width: 34px;
    padding: 3px 9px;
}

.spec-link {
    align-items: center;
    background: #eef5f8;
    border: 1px solid #8ea9ba;
    color: var(--primary-dark);
    display: inline-flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    height: 19px;
    justify-content: center;
    line-height: 1;
    margin-left: 6px;
    text-decoration: none;
    width: 19px;
}

.spec-link:hover {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
    text-decoration: none;
}

.table-panel {
    padding: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.compact-study-table th,
.compact-study-table td {
    padding: 6px 9px;
}

.compact-study-table tfoot th {
    background: #edf1f5;
    border-top: 1px solid #bfccd8;
    font-size: 12px;
}

.empty-study-plan {
    margin-top: 18px;
}

.empty-study-plan h3 {
    background: #f1f4ed;
}

.empty-study-plan p {
    padding: 12px 14px;
}

th,
td {
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 10px;
    text-align: start;
    vertical-align: middle;
}

th {
    background: #f3f5f7;
    border-bottom-color: var(--line);
    color: #334354;
    font-size: 12px;
    font-weight: 700;
}

tr:hover td {
    background: #fafbfc;
}

code {
    background: #f2f4f6;
    border: 1px solid #dfe4ea;
    color: #2f4051;
    padding: 1px 5px;
}

.login-page {
    background: #dfe5eb;
}

.login-shell {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 80px 20px 20px;
}

.login-panel {
    background: white;
    border: 1px solid #b9c3cf;
    max-width: 380px;
    padding: 0;
    width: 100%;
}

.login-brand {
    align-items: center;
    background: var(--header);
    color: white;
    display: flex;
    gap: 12px;
    padding: 13px 16px;
}

.login-brand .brand-mark {
    font-size: 17px;
}

.login-brand strong {
    display: block;
    font-size: 14px;
}

.login-brand small {
    color: #dbe3ea;
    display: block;
    font-size: 12px;
}

.form {
    display: grid;
    gap: 13px;
    padding: 16px;
}

label {
    color: #334354;
    display: grid;
    font-size: 13px;
    font-weight: 600;
    gap: 5px;
}

input {
    border: 1px solid #aeb8c3;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 6px 8px;
    width: 100%;
}

select {
    border: 1px solid #aeb8c3;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 6px 8px;
    width: 100%;
}

textarea {
    border: 1px solid #aeb8c3;
    color: var(--text);
    font: inherit;
    padding: 8px;
    resize: vertical;
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    outline: 2px solid rgba(47, 93, 124, 0.15);
}

.form-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.study-container,
.study-workspace,
.study-results {
    margin-bottom: 18px;
}

.study-workspace {
    background: #dfe6ed;
    border: 1px solid #bdc8d4;
    padding: 14px;
}

.study-results {
    background: #dfe4ea;
    border: 1px solid #bdc8d4;
    display: grid;
    gap: 16px;
    padding: 14px;
}

.action-strip {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.action-strip h3 {
    background: transparent;
    border-bottom: 0;
    margin: 0 0 3px;
    padding: 0;
}

.action-strip p {
    margin: 0;
}

.inline-controls {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    max-width: 1040px;
}

.upload-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) auto;
    max-width: 760px;
}

.study-plan-group {
    margin-bottom: 0;
}

.manual-panel {
    margin-bottom: 18px;
}

.manual-launch {
    margin-bottom: 18px;
}

.manual-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    padding-top: 14px;
}

.manual-actions {
    align-items: end;
    display: flex;
}

.modal-backdrop {
    align-items: flex-start;
    background: rgba(24, 37, 54, 0.42);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: auto;
    padding: 70px 24px 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-panel {
    margin: 0;
    max-width: 1100px;
    width: 100%;
}

.wide-modal {
    max-width: 1280px;
}

.skipped-panel {
    max-height: calc(100vh - 110px);
    overflow: auto;
}

.modal-note {
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
}

.modal-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    margin: -14px -14px 0;
}

.modal-header h3 {
    border-bottom: 0;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    min-height: 36px;
    padding: 0 12px;
}

.warning-button {
    background: #fff8e5;
    border-color: #a66b12;
    color: #5d3a00;
    font-weight: 700;
}

.warning-button span {
    background: #fff;
    border: 1px solid #d6a13d;
    display: inline-block;
    margin-left: 8px;
    min-width: 22px;
    padding: 2px 6px;
    text-align: center;
}

.spec-filter-panel {
    margin-bottom: 18px;
}

.access-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    margin-bottom: 18px;
}

.access-card {
    display: grid;
    gap: 14px;
}

.access-form {
    display: grid;
    gap: 12px;
}

.autocomplete-trap {
    height: 0;
    left: -10000px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.access-form label {
    display: grid;
    gap: 5px;
    font-weight: 700;
}

.access-form .inline-check {
    align-items: center;
    display: flex;
    gap: 8px;
}

.access-privileges {
    background: #f7f9fb;
    border: 1px solid #cbd5df;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.access-privileges h4 {
    margin: 0 0 4px;
}

.admin-flags {
    background: #fff8e5;
    border-color: #d6a13d;
}

.academic-term-form {
    align-items: end;
}

.term-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.term-chip-list span {
    background: #eef4f8;
    border: 1px solid #c8d4df;
    display: inline-block;
    padding: 4px 8px;
}

.role-choice-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.role-choice-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.role-choice-card h3,
.role-choice-card p {
    margin: 0;
}

.role-choice-card .button {
    width: 100%;
}

@media (max-width: 900px) {
    .role-choice-grid {
        grid-template-columns: 1fr;
    }
}

.access-table th,
.access-table td {
    text-align: center;
    vertical-align: middle;
}

.member-row.is-editing {
    background: #fffdf4;
}

.member-control {
    background: #f4f7f9;
    border: 1px solid #c7d3dc;
    box-sizing: border-box;
    font: inherit;
    min-height: 30px;
    padding: 5px 7px;
    width: 100%;
}

.member-control:disabled {
    background: #eef2f5;
    border-color: transparent;
    color: #263645;
    opacity: 1;
}

.member-control[type="checkbox"] {
    min-height: auto;
    width: auto;
}

.member-row td:first-child {
    min-width: 190px;
}

.member-row td:first-child .member-control + .member-control {
    margin-top: 5px;
}

.role-summary {
    color: #4b5f70;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.editable-privileges {
    min-width: 260px;
}

.compact-check {
    font-weight: 700;
    justify-content: flex-start;
    margin: 2px 0;
}

.row-actions {
    white-space: nowrap;
}

.row-actions .button {
    min-width: 70px;
}

.inline-delete-form {
    display: inline-block;
    margin-left: 4px;
}

.button.danger,
.member-delete-button {
    background: #b3261e;
    border-color: #8f1d17;
    color: #fff;
}

.button.danger:hover,
.member-delete-button:hover {
    background: #8f1d17;
}

.self-protected-note {
    background: #eef4f8;
    border: 1px solid #c8d4df;
    color: #4b5f70;
    display: inline-block;
    font-weight: 700;
    padding: 5px 8px;
}

.privilege-list {
    text-align: left !important;
}

.privilege-list span {
    background: #eef4f8;
    border: 1px solid #c8d4df;
    display: inline-block;
    margin: 2px;
    padding: 3px 6px;
}

.decision-panel {
    background: #f7f9fb;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
}

.manual-link-card {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    padding: 14px;
}

.manual-link-card h4,
.manual-link-card p {
    margin: 0;
}

.manual-link-card label {
    display: grid;
    gap: 5px;
}

.progress-modal {
    max-width: 640px;
}

.progress-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.progress-body .modal-note {
    border-bottom: 0;
    color: var(--muted);
    padding: 0;
}

.progress-bar {
    background: #dfe7ed;
    border: 1px solid #b7c4ce;
    height: 22px;
    overflow: hidden;
    position: relative;
}

.progress-bar span {
    animation: batch-progress 1.2s linear infinite;
    background: linear-gradient(90deg, var(--primary-dark), #4f83a6, var(--primary-dark));
    display: block;
    height: 100%;
    width: 42%;
}

@keyframes batch-progress {
    0% {
        transform: translateX(-105%);
    }

    100% {
        transform: translateX(245%);
    }
}

.review-panel {
    margin-bottom: 0;
    overflow-x: auto;
    padding: 0;
}

.review-panel select {
    min-width: 160px;
}

.track-choice-list {
    background: #ffffff;
    border: 1px solid #aeb8c3;
    display: grid;
    gap: 0;
    min-height: 34px;
}

.track-choice-list label {
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    font-weight: 400;
    gap: 8px;
    min-height: 32px;
    padding: 5px 8px;
}

.track-choice-list label:last-child {
    border-bottom: 0;
}

.track-choice-list input {
    min-height: auto;
    width: auto;
}

.track-choice-list .track-linked {
    background: #f2f4f6;
    color: var(--muted);
}

.track-choice-list .track-linked small {
    color: #6f7d58;
    font-size: 12px;
    margin-inline-start: auto;
}

.review-panel h3 {
    margin: 0;
}

.review-panel table {
    margin: 12px 14px 0;
    width: calc(100% - 28px);
}

.review-panel th {
    background: #eef2f6;
    width: 42%;
}

.review-panel td {
    background: #fbfcfd;
}

.editable-records input,
.editable-records select,
.editable-records textarea {
    min-width: 150px;
}

.editable-records input:disabled,
.editable-records select:disabled,
.editable-records textarea:disabled {
    background: #f6f7f8;
    border-color: transparent;
    color: var(--text);
    opacity: 1;
}

.editable-records td {
    vertical-align: top;
}

.row-actions {
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.row-save-button[hidden],
.row-edit-toggle[hidden] {
    display: none;
}

.track-section-stack {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.track-course-section {
    background: #ffffff;
    border: 1px solid #cbd4de;
    border-inline-start: 3px solid #6f7d58;
}

.track-course-section h4 {
    align-items: center;
    background: #f4f6f1;
    border-bottom: 1px solid var(--line);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin: 0;
    padding: 8px 10px;
}

.track-course-section h4 span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.credit-summary-table th,
.credit-summary-table td {
    text-align: center;
}

.credit-summary-table th:first-child,
.credit-summary-table td:first-child {
    text-align: start;
}

.outcome-panel {
    margin-bottom: 18px;
}

.outcome-layout,
.outcome-workspace {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.outcome-layout {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
}

.outcome-form {
    display: grid;
    gap: 12px;
}

.add-outcome-form {
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.outcome-actions {
    margin: 0 -14px -14px;
}

.outcome-manual-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 14px;
}

.outcome-card {
    background: #fbfcfd;
    border: 1px solid var(--line);
    padding: 12px;
}

.outcome-card h4 {
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
    margin: 0 0 4px;
    padding-bottom: 8px;
}

.outcome-card .button {
    justify-self: end;
}

.outcome-table {
    table-layout: fixed;
}

.outcome-table th:first-child,
.outcome-table td:first-child {
    width: 90px;
}

.outcome-table th:last-child,
.outcome-table td:last-child {
    width: 180px;
}

.course-link-list {
    border: 1px solid var(--line);
    display: grid;
    max-height: 320px;
    overflow: auto;
}

.course-link-list label {
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: 8px;
    grid-template-columns: auto auto minmax(220px, 1fr) minmax(180px, 260px);
    min-height: 36px;
    padding: 7px 10px;
}

.course-link-list label:last-child {
    border-bottom: 0;
}

.course-link-list input {
    min-height: auto;
    width: auto;
}

.course-link-list span {
    color: var(--muted);
}

.course-link-list .matched-course {
    background: #f0f7f3;
}

.alignment-table td {
    vertical-align: top;
}

.alignment-missing td {
    background: #fff7f2;
}

.alignment-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
}

.alignment-section-stack,
.alignment-level-stack {
    display: grid;
    gap: 16px;
}

.level-section-body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.nested-alignment-section {
    border: 1px solid #b8c3cc;
}

.nested-alignment-section summary {
    border-bottom: 1px solid #b8c3cc;
}

.alignment-matrix-wrap {
    overflow-x: auto;
}

.alignment-matrix {
    border: 3px solid #42586b;
    box-shadow: 0 2px 7px rgba(24, 37, 54, 0.16);
    table-layout: fixed;
    min-width: 1320px;
}

.course-plo-matrix {
    border: 2px solid #5f7180;
    border-collapse: collapse;
    box-shadow: none;
    min-width: 1140px;
    table-layout: fixed;
}

.course-plo-matrix th,
.course-plo-matrix td {
    border: 1px solid #8d9baa !important;
    padding: 7px 9px;
    vertical-align: middle;
}

.course-plo-matrix thead th {
    background: #e6edf3;
    border-bottom: 2px solid #5f7180 !important;
    text-align: center;
}

.course-plo-matrix tbody tr:nth-child(even) {
    background: #f8fafb;
}

.course-plo-matrix tbody tr.level-group-start > td {
    border-top: 2px solid #5f7180 !important;
}

.course-plo-matrix tbody tr.level-group-end > td {
    border-bottom: 1px solid #8d9baa !important;
}

.merged-level-cell {
    background: #edf3f7;
    border: 1px solid #8d9baa !important;
    color: #0f2538;
    font-weight: 700;
    text-align: center;
    vertical-align: middle !important;
}

.course-plo-col-level {
    width: 100px;
}

.course-plo-level-stack {
    display: grid;
    gap: 18px;
}

.course-plo-level-panel {
    border: 2px solid #5f7180;
    border-inline-start-width: 5px;
}

.course-plo-level-panel summary {
    background: #e9eef3;
    border-bottom: 2px solid #5f7180;
}

.course-plo-col-code {
    width: 120px;
}

.course-plo-col-name {
    width: 330px;
}

.course-plo-col-type {
    width: 180px;
}

.course-plo-col-plo {
    width: 72px;
}

.course-plo-col-spec {
    width: 95px;
}

.course-plo-cell {
    text-align: center;
}

.course-plo-cell.alignment-filled {
    color: #0f2538;
    font-weight: 700;
}

.alignment-col-course {
    width: 150px;
}

.alignment-col-clo {
    width: 88px;
}

.alignment-col-text {
    width: 430px;
}

.alignment-col-plo {
    width: 72px;
}

.alignment-col-action {
    width: 145px;
}

.alignment-matrix th,
.alignment-matrix td {
    border: 1px solid #aeb9c3;
    padding: 7px 9px;
    vertical-align: middle;
}

.alignment-matrix thead th {
    background: #e6edf3;
    border-bottom: 3px solid #42586b;
    color: #0f2538;
    text-align: center;
    vertical-align: middle;
}

.alignment-matrix tbody tr {
    background: #fff;
}

.alignment-matrix tbody tr:nth-child(even) {
    background: #f8fafb;
}

.alignment-matrix th:nth-child(n+4),
.alignment-matrix td:nth-child(n+4) {
    text-align: center;
}

.alignment-matrix select {
    display: block;
    margin: 0 auto;
    width: 54px;
}

.alignment-cell {
    min-width: 64px;
    text-align: center;
    vertical-align: middle !important;
}

.alignment-cell.alignment-empty {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(90, 110, 125, 0.08) 0,
        rgba(90, 110, 125, 0.08) 1px,
        transparent 1px,
        transparent 7px
    );
}

.alignment-cell.alignment-empty .alignment-select {
    display: none;
}

.alignment-cell.alignment-filled select {
    border-color: #596f80;
    color: #0f2538;
    font-weight: 700;
}

.alignment-cell.alignment-inherited select {
    border-style: dashed;
}

.alignment-cell.alignment-editing {
    background-image: none;
}

.plo-domain-knowledge {
    background-color: #eef6fb;
}

.plo-domain-skills {
    background-color: #f4f0fb;
}

.plo-domain-values {
    background-color: #f4f7ed;
}

thead .plo-domain-knowledge {
    background: #d7ebf6;
    border-bottom-color: #5b91ad;
}

thead .plo-domain-skills {
    background: #e5dcf5;
    border-bottom-color: #7c67a5;
}

thead .plo-domain-values {
    background: #e4edd5;
    border-bottom-color: #748d4f;
}

.alignment-matrix td.plo-domain-knowledge.alignment-filled {
    background: #e5f2f8;
}

.alignment-matrix td.plo-domain-skills.alignment-filled {
    background: #eee8f8;
}

.alignment-matrix td.plo-domain-values.alignment-filled {
    background: #edf3e3;
}

.plo-tooltip {
    cursor: default;
    display: inline-flex;
    position: relative;
}

.floating-tooltip {
    background: #17283a;
    border: 1px solid #2f4f68;
    box-shadow: 0 4px 14px rgba(24, 37, 54, 0.28);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    max-width: 360px;
    padding: 7px 9px;
    pointer-events: none;
    position: fixed;
    text-align: left;
    z-index: 200;
}

.outcome-scope-panel {
    display: grid;
    gap: 12px;
}

.alignment-row.course-group-start td {
    border-top: 3px solid #42586b;
}

.alignment-actions {
    min-width: 128px;
    text-align: center;
}

.alignment-actions .inline-check {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 6px;
}

.alignment-actions input[type="checkbox"] {
    height: 14px;
    margin: 0;
    width: 14px;
}

.merged-course-cell {
    background: #f1f5f8;
    border-left: 3px solid #42586b !important;
    border-right: 3px solid #42586b !important;
    border-top: 3px solid #42586b !important;
    text-align: center;
    vertical-align: middle !important;
}

.merged-course-cell code,
.merged-course-cell strong,
.merged-course-cell span {
    display: block;
}

.merged-course-cell strong {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 5px;
}

.course-spec-shortcut {
    margin: 8px auto 0;
}

.alignment-row.course-group-start td:last-child {
    border-right: 3px solid #42586b;
}

.clo-symbol-cell {
    text-align: center;
    vertical-align: middle !important;
}

.autosave-status {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

.locked-alignment {
    color: var(--muted);
    font-weight: 700;
}

.spec-workspace {
    display: grid;
    gap: 18px;
}

.spec-detail-workspace {
    gap: 20px;
    max-width: 1680px;
    font-size: 14px;
}

.spec-detail-card {
    --section-accent: #5f7180;
    --section-header: #e9eef3;
    --section-soft: #f7f9fb;
    padding: 0;
}

.spec-section-heading {
    align-items: center;
    background: linear-gradient(#f9fafb, #edf1f5);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
}

.spec-section-heading h3 {
    background: transparent;
    border-bottom: 0;
    color: #0f2538;
    font-size: 15px;
    margin: 0 0 3px;
    padding: 0;
}

.spec-section-heading p {
    color: var(--muted);
    margin: 0;
}

.spec-detail-card .spec-grid-form,
.spec-detail-card .spec-text-form {
    padding: 16px;
}

.spec-detail-card .spec-grid-form {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.spec-detail-card label {
    color: #263747;
}

.spec-detail-card input,
.spec-detail-card textarea,
.spec-detail-card select {
    font-size: 14px;
}

.spec-detail-card textarea {
    line-height: 1.5;
    min-height: 74px;
    overflow: hidden;
    white-space: pre-wrap;
}

.spec-detail-card input:disabled,
.spec-detail-card textarea:disabled,
.spec-detail-card select:disabled {
    background: #fbfcfd;
    border-color: transparent;
    color: #182536;
    opacity: 1;
}

.spec-detail-card textarea:disabled {
    overflow: visible;
}

.spec-form-actions {
    margin: 0 -16px -16px;
}

.spec-clo-table {
    border: 2px solid var(--section-accent);
    table-layout: fixed;
    width: 1360px;
    margin-inline-end: auto;
}

.spec-clo-table th,
.spec-clo-table td,
.spec-document-table th,
.spec-document-table td {
    border: 1px solid #9facb9;
    vertical-align: middle;
    white-space: normal;
    word-break: normal;
}

.spec-clo-table th,
.spec-document-table th {
    background: var(--section-header);
    color: #0f2538;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
}

.spec-clo-table thead th,
.spec-document-table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

.spec-clo-table tbody td {
    background: #f8faf6;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.spec-clo-table tbody tr:nth-child(even):not(.clo-domain-row) td {
    background: #f1f4ef;
}

.spec-clo-table .clo-domain-row td {
    background: #56b7bf !important;
    border-color: #56b7bf;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 8px;
    text-align: start;
    vertical-align: middle;
}

.spec-clo-table .clo-domain-row .spec-field-code {
    text-align: center;
}

.spec-clo-table td {
    padding: 8px;
}

.spec-clo-table textarea,
.spec-clo-table input {
    min-height: 34px;
}

.spec-clo-table textarea {
    min-height: 42px;
}

.spec-clo-table .spec-field-code,
.spec-clo-table .spec-field-plo,
.spec-clo-table .spec-field-action {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.spec-clo-table .spec-field-code {
    width: 72px;
}

.spec-clo-table .spec-field-plo {
    width: 92px;
}

.spec-clo-table .spec-field-action {
    width: 170px;
}

.spec-clo-table .spec-field-outcome {
    width: 405px;
    vertical-align: middle;
}

.spec-clo-table .spec-field-strategies,
.spec-clo-table .spec-field-assessment {
    width: 280px;
    vertical-align: middle;
}

.spec-clo-table .spec-field-assessment {
    width: 285px;
}

.inline-row-actions {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
}

.spec-edit-save-toggle {
    min-height: 30px;
    min-width: 62px;
    padding: 5px 10px;
}

.inline-row-actions .spec-save-button[hidden],
.inline-row-actions .spec-edit-toggle[hidden] {
    display: none;
}

.trash-check {
    align-items: center;
    display: inline-flex;
    margin: 0;
}

.trash-check input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.trash-check span {
    align-items: center;
    background: #a12621;
    border: 1px solid #7f1d1a;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    width: 30px;
}

.trash-check input:disabled + span {
    cursor: not-allowed;
    opacity: 0.45;
}

.trash-check input:checked + span {
    background: #6f211e;
    outline: 2px solid rgba(161, 38, 33, 0.25);
}

.spec-document-sections {
    display: grid;
    gap: 14px;
}

.spec-document-section {
    border: 1px solid #b9c5d0;
    border-inline-start-width: 4px;
    border-inline-start-color: var(--section-accent);
    padding: 0;
}

.spec-document-section > summary {
    align-items: center;
    background: linear-gradient(#ffffff, var(--section-header));
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: space-between;
    list-style: none;
    padding: 10px 12px;
}

.spec-document-section > summary::-webkit-details-marker {
    display: none;
}

.spec-document-section > summary span::before {
    color: var(--section-accent);
    content: "+";
    margin-inline-end: 8px;
}

.spec-document-section[open] > summary span::before {
    content: "-";
}

.spec-document-section > summary small {
    background: #fff;
    border: 1px solid var(--section-accent);
    color: var(--section-accent);
    font-size: 12px;
    min-width: 30px;
    padding: 1px 7px;
    text-align: center;
}

.spec-document-section > summary em {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 2px;
}

.spec-document-table {
    border: 2px solid var(--section-accent);
    table-layout: auto;
    width: auto;
    margin-inline-end: auto;
}

html[dir="rtl"] .spec-clo-table,
html[dir="rtl"] .spec-document-table {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

.spec-document-table td {
    font-size: 14px;
    line-height: 1.45;
    padding: 10px 12px;
}

.spec-document-table textarea {
    min-height: 42px;
    min-width: 110px;
}

.spec-document-table .spec-field-no,
.spec-document-table .spec-field-code,
.spec-document-table .spec-field-contact-hours,
.spec-document-table .spec-field-percentage,
.spec-document-table .spec-field-percentage-of-total-assessment-score,
.spec-document-table .spec-field-action {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}

.spec-document-table .spec-field-no,
.spec-document-table .spec-field-code {
    min-width: 58px;
}

.spec-document-table .spec-field-contact-hours,
.spec-document-table .spec-field-percentage,
.spec-document-table .spec-field-percentage-of-total-assessment-score {
    min-width: 96px;
}

.spec-document-table .spec-field-action {
    min-width: 150px;
}

.spec-document-table .spec-field-activity,
.spec-document-table .spec-field-mode-of-instruction,
.spec-document-table .spec-field-assessment-activities,
.spec-document-table .spec-field-assessment-timing-in-week-no,
.spec-document-table .spec-field-assessment-areas-issues,
.spec-document-table .spec-field-assessor,
.spec-document-table .spec-field-assessment-methods,
.spec-document-table .spec-field-items,
.spec-document-table .spec-field-resources {
    max-width: 360px;
    min-width: 190px;
    width: 34ch;
}

.spec-document-table .spec-field-list-of-topics,
.spec-document-table .spec-field-content {
    max-width: 620px;
    min-width: 360px;
    width: 68ch;
}

.spec-section-topics .spec-document-table th:nth-child(2),
.spec-section-topics .spec-document-table td:nth-child(2) {
    max-width: 620px;
    min-width: 420px;
}

.spec-section-assessment_activities .spec-document-table th:nth-child(2),
.spec-section-assessment_activities .spec-document-table td:nth-child(2),
.spec-section-quality_assessment .spec-document-table th:nth-child(2),
.spec-section-quality_assessment .spec-document-table td:nth-child(2),
.spec-section-learning_resources .spec-document-table th:nth-child(2),
.spec-section-learning_resources .spec-document-table td:nth-child(2) {
    max-width: 520px;
    min-width: 320px;
}

.spec-section-contact_hours .spec-document-table,
.spec-section-teaching_modes .spec-document-table,
.spec-section-approval .spec-document-table {
    min-width: 0;
}

.spec-section-contact_hours .spec-document-table textarea,
.spec-section-teaching_modes .spec-document-table textarea,
.spec-section-approval .spec-document-table textarea {
    min-height: 38px;
}

.spec-section-contact_hours .spec-document-table textarea:disabled,
.spec-section-teaching_modes .spec-document-table textarea:disabled,
.spec-section-approval .spec-document-table textarea:disabled {
    min-height: 38px;
}

.spec-section-identity {
    --section-accent: #2f5d7c;
    --section-header: #e7f0f6;
    --section-soft: #f5f9fc;
}

.spec-section-description {
    --section-accent: #5f7180;
    --section-header: #edf1f4;
    --section-soft: #f8fafb;
}

.spec-section-clo {
    --section-accent: #6f7d58;
    --section-header: #eef3e8;
    --section-soft: #f8faf5;
}

.spec-section-teaching_modes {
    --section-accent: #856f3d;
    --section-header: #f4ead2;
}

.spec-section-contact_hours {
    --section-accent: #3f6f72;
    --section-header: #e2f0f1;
}

.spec-section-topics {
    --section-accent: #7b6044;
    --section-header: #f0e7df;
}

.spec-section-assessment_activities {
    --section-accent: #755f7f;
    --section-header: #f0e8f4;
}

.spec-section-learning_resources {
    --section-accent: #416d58;
    --section-header: #e5f0ea;
}

.spec-section-facilities {
    --section-accent: #5f697c;
    --section-header: #e8ecf2;
}

.spec-section-quality_assessment {
    --section-accent: #8a5e5b;
    --section-header: #f3e6e4;
}

.spec-section-approval {
    --section-accent: #4f657e;
    --section-header: #e5ebf2;
}

.spec-section-clo .spec-table-wrap,
.spec-document-section .spec-table-wrap {
    background: var(--section-soft, #f8fafb);
    padding: 14px;
}

.spec-command-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
    margin-bottom: 18px;
}

.spec-command-card {
    display: grid;
    gap: 14px;
    padding: 0;
}

.spec-command-card h3 {
    background: transparent;
    border-bottom: 0;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

.spec-command-copy {
    border-bottom: 1px solid var(--line);
    padding: 14px;
}

.spec-command-copy p {
    margin-top: 6px;
}

.spec-command-form {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.spec-command-form .button {
    justify-self: end;
}

.inline-check {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.inline-check input {
    min-height: auto;
    width: auto;
}

.spec-panel-heading {
    align-items: center;
    background: linear-gradient(#f9fafb, #edf1f5);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: -14px -14px 14px;
    padding: 12px 14px;
}

.spec-panel-heading h3 {
    background: transparent;
    border-bottom: 0;
    font-size: 15px;
    margin: 0 0 3px;
    padding: 0;
}

.pending-spec-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(300px, 420px) minmax(420px, 1fr);
    margin-bottom: 16px;
}

.spec-summary-box,
.spec-link-box {
    background: #ffffff;
    border: 1px solid #bfccd8;
}

.spec-summary-box h4,
.spec-link-box h4 {
    background: #f2f5f7;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    margin: 0;
    padding: 9px 10px;
}

.spec-key-table th,
.spec-key-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 10px;
}

.spec-key-table th {
    width: 145px;
}

.spec-link-box .course-link-list {
    border: 0;
    max-height: 292px;
}

.spec-local-actions {
    background: #f7f9fb;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

.spec-review-panel,
.spec-report-panel,
.spec-saved-panel {
    margin-bottom: 18px;
}

.spec-subsection {
    margin-top: 12px;
}

.spec-report-cards {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    margin-bottom: 14px;
}

.spec-report-cards div {
    background: #f7f9fb;
    border: 1px solid var(--line);
    padding: 10px;
}

.spec-report-cards span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.spec-report-cards strong {
    color: #17283a;
    display: block;
    font-size: 22px;
    line-height: 1.1;
    margin-top: 3px;
}

.spec-report-folder {
    color: var(--muted);
    font-family: Consolas, "Courier New", monospace;
    word-break: break-word;
}

.spec-report-stack {
    display: grid;
    gap: 12px;
}

.spec-report-table {
    table-layout: fixed;
}

.spec-report-table th,
.spec-report-table td {
    border: 1px solid #c8d1da;
    vertical-align: top;
}

.spec-report-table th:first-child {
    width: 42%;
}

.spec-file-cell {
    color: #445565;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
}

.spec-course-chip {
    background: #f7f9fb;
    border: 1px solid var(--line-soft);
    margin-bottom: 5px;
    padding: 4px 6px;
}

.spec-course-chip small {
    color: var(--muted);
    display: block;
    margin-top: 2px;
}

.spec-count-pill {
    background: #fff;
    border: 1px solid #b8c3cc;
    color: #334354;
    font-size: 13px;
    font-weight: 700;
    min-width: 38px;
    padding: 4px 9px;
    text-align: center;
}

.saved-spec-table {
    border: 1px solid #9facb9;
    table-layout: fixed;
    min-width: 1120px;
}

.saved-spec-table th,
.saved-spec-table td {
    border: 1px solid #c8d1da;
    text-align: center;
    vertical-align: middle;
}

.saved-spec-table thead th {
    background: #e7edf2;
    color: #102638;
    text-align: center;
}

.saved-spec-table tbody tr:nth-child(even) td {
    background: #f8fafb;
}

.saved-spec-course strong {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 5px;
    text-align: center;
}

.saved-spec-table code {
    display: inline-block;
    text-align: center;
}

.saved-spec-table .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.saved-spec-code {
    width: 135px;
}

.saved-spec-title {
    width: 330px;
}

.saved-spec-program {
    width: 230px;
}

.saved-spec-version {
    width: 80px;
}

.saved-spec-count {
    width: 72px;
}

.saved-spec-date {
    width: 145px;
}

.saved-spec-action {
    width: 90px;
}

.parsed-clo-table {
    table-layout: fixed;
    min-width: 900px;
}

.spec-col-symbol {
    width: 90px;
}

.spec-col-domain {
    width: 180px;
}

.spec-col-plo {
    width: 90px;
}

.spec-title h1 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-card {
    border-inline-start: 4px solid #5f7180;
}

.spec-grid-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    padding: 14px;
}

.spec-grid-form .span-2 {
    grid-column: span 2;
}

.spec-grid-form .span-3 {
    grid-column: 1 / -1;
}

.spec-text-form {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.spec-table-wrap {
    overflow-x: auto;
}

.spec-detail-workspace .spec-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.spec-edit-table {
    min-width: 1180px;
    table-layout: fixed;
}

.spec-edit-table th,
.spec-edit-table td {
    border: 1px solid #aeb9c3;
    vertical-align: top;
}

.spec-edit-table th {
    background: #e6edf3;
    color: #0f2538;
    text-align: center;
}

.spec-edit-table input,
.spec-edit-table textarea {
    background: #fff;
    font-size: 12px;
    min-height: 30px;
    white-space: pre-line;
}

.spec-edit-table textarea {
    min-width: 180px;
}

.spec-edit-table .add-row td {
    background: #f7f9fb;
}

.spec-edit-table input:disabled,
.spec-edit-table textarea:disabled,
.spec-grid-form input:disabled,
.spec-text-form textarea:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    opacity: 1;
}

.spec-edit-table textarea:disabled,
.spec-text-form textarea:disabled {
    resize: none;
}

.spec-edit-table.spec-clo-table,
.spec-edit-table.spec-document-table {
    min-width: 0;
}

.spec-edit-table.spec-clo-table {
    table-layout: fixed;
    width: 1360px;
}

.spec-edit-table.spec-document-table {
    table-layout: auto;
    width: max-content;
}

.spec-edit-table.spec-clo-table th,
.spec-edit-table.spec-document-table th {
    background: var(--section-header);
}

.spec-edit-table.spec-clo-table input,
.spec-edit-table.spec-clo-table textarea,
.spec-edit-table.spec-document-table textarea {
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.spec-edit-table.spec-clo-table input:disabled,
.spec-edit-table.spec-clo-table textarea:disabled {
    text-align: inherit;
}

.spec-edit-table.spec-clo-table .spec-field-code input,
.spec-edit-table.spec-clo-table .spec-field-plo input {
    text-align: center;
}

.spec-edit-table.spec-clo-table textarea,
.spec-edit-table.spec-document-table textarea {
    min-width: 0;
    overflow: hidden;
}

.spec-edit-table.spec-clo-table input:disabled,
.spec-edit-table.spec-clo-table textarea:disabled,
.spec-edit-table.spec-document-table textarea:disabled {
    background: transparent;
    border-color: transparent;
    color: #17283a;
    opacity: 1;
}

.stacked-actions {
    display: grid;
    gap: 6px;
    min-width: 80px;
}

.button.danger,
button.danger {
    background: #8d2b27;
    border-color: #6f211e;
    color: #fff;
}

.trash-button {
    align-items: center;
    background: #a12621;
    border: 1px solid #7f1d1a;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    line-height: 1;
    min-height: 30px;
    padding: 0;
    width: 30px;
}

.trash-button:hover {
    background: #7f1d1a;
}

.center-cell {
    text-align: center;
    vertical-align: middle !important;
}

.muted-text {
    color: var(--muted);
    font-size: 12px;
}

.owner-scope {
    color: var(--muted);
    font-weight: 600;
    min-width: 180px;
}

.upload-progress {
    background: #f7f9fb;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    padding: 10px 12px;
}

.wizard-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    padding: 14px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: #f7f9fb;
    padding: 12px 14px;
}

.form-actions-right {
    display: inline-flex;
    gap: 10px;
}

.empty-row {
    color: var(--muted);
    padding: 12px;
}

.messages {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.message {
    background: #f7f9fb;
    border: 1px solid var(--line);
    padding: 8px 10px;
}

.message.success {
    background: #f0f7f3;
    border-color: #b7d5c2;
    color: #1f5f37;
}

.message.error {
    background: #fff3f2;
    border-color: #e2bbb8;
    color: var(--danger);
}

.ajax-toast {
    bottom: 18px;
    box-shadow: 0 2px 8px rgba(24, 37, 54, 0.18);
    max-width: 420px;
    position: fixed;
    right: 18px;
    z-index: 70;
}

.alert {
    background: #fff3f2;
    border-bottom: 1px solid #e2bbb8;
    color: var(--danger);
    padding: 10px 16px;
}

.coursework-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    margin-bottom: 18px;
}

.coursework-grid[hidden],
[hidden].coursework-grid {
    display: none !important;
}

.coursework-page-shell {
    min-height: 0;
}

.coursework-page-shell.has-matrix {
    display: block;
    min-height: 0;
    overflow: visible;
}

.coursework-upload {
    margin-top: 14px;
}

.calculation-note {
    background: #f8fbfd;
    border: 1px solid var(--line);
    display: grid;
    gap: 6px;
    padding: 12px;
}

.calculation-note strong {
    color: var(--primary-dark);
}

.coursework-review,
.coursework-saved {
    margin-top: 18px;
}

.review-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.review-summary span {
    background: #f7f9fb;
    border: 1px solid var(--line);
    color: #243647;
    padding: 6px 9px;
}

.two-column-review {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr);
}

.two-column-review h4,
.coursework-saved h4 {
    margin: 16px 0 8px;
}

.classic-data-table {
    background: #fff;
    border: 1px solid #8fa0b0;
    border-collapse: collapse;
    margin: 0 0 14px;
    width: auto;
}

.classic-data-table caption {
    background: #f4f0e4;
    border: 1px solid #8fa0b0;
    border-bottom: 0;
    caption-side: top;
    color: #152334;
    font-weight: 700;
    padding: 7px 10px;
    text-align: left;
}

.classic-data-table th,
.classic-data-table td {
    border: 1px solid #b8c3ce;
    padding: 8px 10px;
    vertical-align: middle;
}

.classic-data-table th {
    background: #e7eef4;
    color: #0f2336;
    font-weight: 700;
    text-align: center;
}

.classic-data-table code {
    background: #eef3f7;
    border: 1px solid #d7e0e8;
    padding: 1px 5px;
}

.coursework-preview-table {
    min-width: 430px;
}

.coursework-preview-table caption {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.final-category-check {
    color: #213246;
    font-size: 12px;
    font-weight: 600;
}

.classic-data-table input,
.classic-data-table select {
    background: #fff;
    border: 1px solid #b7c4cf;
    font: inherit;
    min-height: 32px;
    padding: 5px 7px;
    width: 100%;
}

.classic-data-table .short-input {
    max-width: 90px;
    text-align: center;
}

.classic-data-table .compact-input {
    min-width: 160px;
}

.extra-assessment-row td {
    background: #fbfcf7;
}

.omitted-table td:last-child {
    color: var(--danger);
    font-weight: 600;
}

.totals-table {
    min-width: 720px;
}

.review-actions {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
}

.coursework-matrix-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 190px);
    min-height: 0;
    padding: 0;
    width: 100%;
}

.coursework-page-shell.has-matrix .coursework-matrix-panel {
    height: calc(100dvh - 236px);
    margin-top: 0;
    min-height: 0;
    overflow: hidden;
}

.coursework-matrix-panel > h3 {
    display: none;
}

.reset-coursework-panel {
    align-items: center;
    background: #fff8f7;
    border: 1px solid #d8aaa5;
    border-inline-start: 4px solid #a12621;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 520px);
    margin-top: 16px;
}

.reset-coursework-panel h3 {
    color: #7c1d18;
    margin: 0 0 5px;
}

.reset-coursework-panel p {
    color: #5f3b38;
    margin: 0;
}

.reset-coursework-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(160px, 1fr) auto;
}

.reset-coursework-form label {
    color: #263747;
    font-weight: 700;
}

.reset-coursework-form input {
    box-sizing: border-box;
    margin-top: 4px;
    width: 100%;
}

.reset-coursework-message {
    color: #7c1d18;
    font-weight: 700;
    grid-column: 1 / -1;
}

.reset-coursework-message.success {
    color: #245d34;
}

.matrix-toolbar {
    align-items: center;
    background: #f5f8fa;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
}

.matrix-toolbar h3 {
    background: transparent;
    border: 0;
    font-size: 16px;
    margin: 0 0 3px;
    padding: 0;
}

.matrix-toolbar p {
    margin: 0;
}

.matrix-toolbar-actions {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.coursework-matrix-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.coursework-matrix-wrap {
    background: #f7f9fb;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 14px 14px;
    scrollbar-gutter: stable both-edges;
}

.coursework-matrix-table {
    background: #fff;
    border: 2px solid #40576d;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0;
    min-width: 1180px;
    width: max-content;
}

.coursework-matrix-table th,
.coursework-matrix-table td {
    border: 1px solid #9fb0bf;
    padding: 7px 8px;
    vertical-align: middle;
}

.coursework-matrix-table thead th {
    background-clip: padding-box;
    border-color: #1a1a1a;
    color: #0f2234;
    font-weight: 700;
    height: 34px;
    position: sticky;
    text-align: center;
    z-index: 30;
}

.coursework-matrix-table thead tr:nth-child(1) th {
    border-top: 3px solid #1a1a1a;
    height: 34px;
    top: 0;
}

.coursework-matrix-table thead tr:nth-child(2) th {
    height: 34px;
    top: 34px;
}

.coursework-matrix-table thead tr:nth-child(3) th {
    height: 42px;
    top: 68px;
}

.coursework-matrix-table thead tr:nth-child(4) th {
    border-bottom: 3px solid #1a1a1a;
    height: 34px;
    top: 110px;
}

.coursework-matrix-table thead th[rowspan] {
    border-bottom: 3px solid #1a1a1a;
    top: 0;
    z-index: 35;
}

.coursework-matrix-table thead tr th:first-child {
    border-left: 3px solid #1a1a1a;
}

.coursework-matrix-table thead tr th:last-child {
    border-right: 3px solid #1a1a1a;
}

.coursework-matrix-table tbody td {
    background: #fff;
    height: 38px;
    position: relative;
    z-index: 1;
}

.coursework-matrix-table .narrow-col {
    min-width: 70px;
}

.coursework-matrix-table .row-action-col {
    min-width: 44px;
    width: 44px;
}

.coursework-matrix-table .id-col {
    min-width: 130px;
}

.coursework-matrix-table .name-col {
    min-width: 260px;
}

.coursework-matrix-table .coursework-band {
    border-bottom: 2px solid #40576d;
}

.coursework-matrix-table .final-band {
    border-bottom: 2px solid #40576d;
}

.coursework-matrix-table .category-band {
    white-space: nowrap;
}

.category-order-controls,
.item-order-controls,
.item-category-controls {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    justify-content: center;
}

.category-order-controls {
    margin-inline-end: 4px;
}

.item-order-controls,
.item-category-controls {
    display: flex;
    margin: 2px auto;
}

.matrix-order-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #6c7f8f;
    color: #17283a;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    min-height: 19px;
    justify-content: center;
    line-height: 1;
    padding: 2px 5px;
}

.matrix-order-button:hover {
    background: #20364b;
    border-color: #20364b;
    color: #ffffff;
}

.item-category-controls select {
    font-size: 11px;
    max-width: 150px;
    min-height: 22px;
    padding: 1px 4px;
}

.category-max-pill {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(64, 87, 109, 0.45);
    color: #263747;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    margin-inline-start: 8px;
    padding: 1px 5px;
}

.coursework-matrix-table .subitem-header {
    min-width: 96px;
}

.matrix-header-action {
    background: transparent;
    border: 0;
    color: #0f2234;
    cursor: pointer;
    display: inline;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
}

.matrix-header-action:hover {
    text-decoration-color: #0f2234;
}

.matrix-plus-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #50677b;
    color: #213246;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    height: 21px;
    justify-content: center;
    line-height: 1;
    margin-inline-start: 6px;
    padding: 0;
    width: 21px;
}

.matrix-plus-button:hover {
    background: #213246;
    color: #fff;
}

.row-action-cell {
    min-width: 44px;
    text-align: center;
}

.row-delete-x,
.column-delete-x {
    align-items: center;
    border: 1px solid #9e2d2d;
    background: #b5302f;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 20px;
}

.column-delete-x {
    margin-inline-start: 4px;
}

.row-delete-x:hover,
.column-delete-x:hover {
    background: #7f1e1e;
    border-color: #7f1e1e;
}

.student-row-input {
    background: #ffffff;
    border: 1px solid #9fb0bf;
    color: #17283a;
    font: inherit;
    min-height: 28px;
    padding: 4px 6px;
    width: 100%;
}

.student-id-input {
    min-width: 110px;
}

.student-name-input {
    min-width: 240px;
}

.coursework-matrix-table .subtotal-header {
    border-left: 2px solid #40576d;
    min-width: 108px;
}

.coursework-matrix-table .total-col {
    background: #e8edf2;
    min-width: 110px;
}

.coursework-matrix-table .category-tone-0 { background-color: #e7f1f5; }
.coursework-matrix-table .category-tone-1 { background-color: #f4efe2; }
.coursework-matrix-table .category-tone-2 { background-color: #e9f2e7; }
.coursework-matrix-table .category-tone-3 { background-color: #f3e9ef; }
.coursework-matrix-table .category-tone-4 { background-color: #e9edf8; }
.coursework-matrix-table .category-tone-5 { background-color: #f1eee8; }
.coursework-matrix-table .category-tone-6 { background-color: #e6f0ec; }
.coursework-matrix-table .category-tone-7 { background-color: #f5ece7; }

.coursework-matrix-table .category-band.category-tone-0 { background-color: #d7e8ef; }
.coursework-matrix-table .category-band.category-tone-1 { background-color: #eadfca; }
.coursework-matrix-table .category-band.category-tone-2 { background-color: #d7e8d4; }
.coursework-matrix-table .category-band.category-tone-3 { background-color: #ead8e2; }
.coursework-matrix-table .category-band.category-tone-4 { background-color: #d9dfef; }
.coursework-matrix-table .category-band.category-tone-5 { background-color: #e4ded2; }
.coursework-matrix-table .category-band.category-tone-6 { background-color: #d3e4de; }
.coursework-matrix-table .category-band.category-tone-7 { background-color: #eadbd4; }

.coursework-matrix-table .clo-header.category-tone-0,
.coursework-matrix-table .clo-header.category-tone-1,
.coursework-matrix-table .clo-header.category-tone-2,
.coursework-matrix-table .clo-header.category-tone-3,
.coursework-matrix-table .clo-header.category-tone-4,
.coursework-matrix-table .clo-header.category-tone-5,
.coursework-matrix-table .clo-header.category-tone-6,
.coursework-matrix-table .clo-header.category-tone-7 {
    filter: saturate(0.85) brightness(1.03);
}

.coursework-matrix-table select {
    background: #fff;
    border: 1px solid #9fb0bf;
    font: inherit;
    min-height: 28px;
    min-width: 78px;
    text-align: center;
}

.coursework-matrix-table .mark-input {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid transparent;
    color: #17283a;
    font: inherit;
    min-height: 28px;
    min-width: 64px;
    padding: 4px 6px;
    text-align: center;
    width: 72px;
}

.coursework-matrix-table .mark-input:hover,
.coursework-matrix-table .mark-input:focus {
    background: #ffffff;
    border-color: #50677b;
}

.coursework-matrix-table .mark-cell.mark-column-error {
    background: #f8d9d7 !important;
}

.coursework-matrix-table .mark-cell.mark-over-limit {
    background: #cfe5ff !important;
    box-shadow: inset 0 0 0 2px #1f5f9d;
}

.coursework-matrix-table .mark-cell.mark-over-limit .mark-input {
    background: #eaf4ff;
    border-color: #1f5f9d;
    color: #0f3f73;
    font-weight: 700;
}

.coursework-matrix-table .mark-cell.invalid-number-cell,
.coursework-matrix-table .max-header.invalid-number-cell {
    background: #ffd9d9 !important;
    box-shadow: inset 0 0 0 2px #b42318;
}

.coursework-matrix-table .mark-input.is-invalid-number,
.coursework-matrix-table .max-input.is-invalid-number {
    background: #fff1f1 !important;
    border-color: #b42318 !important;
    color: #7a1b14 !important;
    font-weight: 800;
}

.coursework-matrix-table .max-header.mark-column-error,
.coursework-matrix-table .subitem-header.mark-column-error,
.coursework-matrix-table .clo-header.mark-column-error {
    background: #f3bbb7 !important;
    color: #7b1511;
}

.coursework-matrix-table .max-header.mark-column-error .max-input {
    border-color: #a12621;
    color: #7b1511;
}

.coursework-matrix-table .max-input {
    background: #ffffff;
    border: 1px solid #8798a8;
    color: #0f2234;
    font: inherit;
    font-weight: 700;
    min-height: 28px;
    padding: 4px 5px;
    text-align: center;
    width: 70px;
}

.coursework-matrix-table .max-input:focus {
    border-color: #1a1a1a;
    outline: 2px solid rgba(47, 93, 124, 0.18);
}

.coursework-matrix-table code {
    background: #eef3f7;
    border: 1px solid #d7e0e8;
    padding: 1px 5px;
}

.clo-attainment-panel {
    border-left-color: #4c3e91;
}

.clo-attainment-panel h4 {
    color: #32aeb8;
    font-size: 17px;
    margin: 14px 0 6px;
}

.clo-attainment-table {
    border-collapse: collapse;
    border: 2px solid #4e428f;
    font-size: 14px;
    margin-top: 6px;
    max-width: 1280px;
    width: 100%;
}

.clo-attainment-table th,
.clo-attainment-table td {
    border: 2px solid #ffffff;
    padding: 7px 8px;
    vertical-align: middle;
}

.clo-attainment-table thead th {
    background: #514392;
    color: #ffffff;
    font-weight: 800;
    text-align: center;
}

.clo-attainment-table thead tr:nth-child(2) th {
    background: #8e93c7;
}

.clo-attainment-table tbody td {
    background: #e9e9e9;
}

.clo-attainment-table tbody tr:nth-child(even):not(.clo-domain-row) td {
    background: #f3f3f3;
}

.clo-attainment-table .clo-domain-row th {
    background: #52b8c1;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-align: left;
}

.clo-attainment-table .clo-domain-row th:first-child,
.clo-attainment-table .clo-code-cell,
.clo-attainment-table .clo-actual-cell {
    font-weight: 800;
    text-align: center;
}

.clo-attainment-table .clo-code-cell {
    white-space: nowrap;
}

.clo-two-line-cell {
    line-height: 1.65;
    min-width: 118px;
}

.inline-indirect-entry {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
}

.inline-indirect-entry input {
    border: 1px solid #9fb2c4;
    font: inherit;
    height: 28px;
    padding: 2px 5px;
    text-align: center;
    width: 64px;
}

.inline-indirect-entry input.is-saving {
    background: #fff8df;
}

.inline-indirect-entry input.is-saved {
    background: #e8f5eb;
    border-color: #5b9b69;
}

.inline-indirect-entry input.is-invalid {
    background: #fde8e8;
    border-color: #b32828;
}

.mark-cell,
.calculated-cell,
.category-total-cell {
    text-align: center;
}

.category-total-cell {
    background: #eef3f7 !important;
    border-left: 2px solid #40576d !important;
    font-weight: 700;
}

.calculated-cell {
    background: #f7f9fb !important;
    font-weight: 600;
}

.strong-total {
    color: var(--primary-dark);
}

.matrix-actions {
    background: #f7f9fb;
    border-top: 1px solid var(--line);
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 12px 14px;
}

.coursework-modal-panel {
    max-width: 860px;
}

.column-mapping-panel {
    max-width: 1120px;
}

.coursework-modal-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    padding: 14px;
}

.coursework-modal-grid.single-column {
    grid-template-columns: 1fr;
}

.coursework-modal-grid input,
.coursework-modal-grid select {
    width: 100%;
}

.modal-check {
    align-self: end;
    background: #f7f9fb;
    border: 1px solid var(--line);
    min-height: 34px;
    padding: 6px 8px;
}

.modal-actions {
    align-items: center;
    background: #f7f9fb;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 14px;
}

.mapping-choice-table {
    margin: 14px;
    width: calc(100% - 28px);
}

.mapping-choice-table th,
.mapping-choice-table td {
    vertical-align: middle;
}

.mapping-choice-table th {
    text-align: center;
}

.suggested-mapping-row {
    background: #eef7ef;
}

.mapping-pill {
    background: #2f6b4f;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-inline-start: 8px;
    padding: 2px 6px;
}

.mapping-samples {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mapping-samples li + li {
    margin-top: 3px;
}

.coursework-results-panel {
    flex: 0 0 auto;
    margin-top: 16px;
    overflow: visible;
}

.results-heading {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.results-heading h3 {
    background: transparent;
    border: 0;
    color: #4b3c93;
    font-size: 20px;
    margin: 0 0 4px;
    padding: 0;
}

.result-total-pill {
    background: #ffffff;
    border: 1px solid #b7c4cf;
    color: #263747;
    font-weight: 700;
    padding: 5px 10px;
}

.coursework-results-panel h4 {
    color: #42aeb8;
    font-size: 16px;
    margin: 10px 0 6px;
}

.student-results-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(760px, 1fr) minmax(280px, 360px);
}

.student-results-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

.student-results-table th,
.student-results-table td {
    border: 1px solid #ffffff;
    font-size: 14px;
    font-weight: 700;
    height: 48px;
    text-align: center;
    vertical-align: middle;
}

.student-results-table thead th {
    background: #8f95c8;
    color: #ffffff;
}

.student-results-table .result-band,
.student-results-table tbody th {
    background: #4e4090;
    color: #ffffff;
    font-size: 15px;
}

.student-results-table .result-corner {
    background: #4e4090;
    width: 122px;
}

.student-results-table tbody td {
    background: #e8e8e8;
    color: #17283a;
    font-weight: 700;
}

.student-results-table tbody tr:nth-child(2) td {
    background: #d4d4d4;
}

.student-results-table .vertical-label {
    height: 92px;
    padding: 4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.grade-chart-card {
    background: #ffffff;
    border: 1px solid #c8d4df;
    border-inline-start: 4px solid #4e4090;
    margin-top: 16px;
    padding: 14px 16px 16px;
}

.grade-chart-heading {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.grade-chart-heading h4 {
    color: #4e4090;
    margin: 0;
}

.grade-chart-heading span {
    color: #53677a;
    font-size: 13px;
}

.grade-chart {
    align-items: end;
    background: #fbfcfd;
    border: 1px solid #9fb0bf;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(9, minmax(54px, 1fr));
    min-height: 250px;
    padding: 14px 16px 12px;
}

.grade-chart-column {
    align-items: center;
    display: grid;
    grid-template-rows: 24px 150px 28px 24px;
    min-width: 0;
    text-align: center;
}

.grade-chart-value,
.grade-chart-label,
.grade-chart-percent {
    color: #17283a;
    font-weight: 700;
}

.grade-chart-value {
    font-size: 14px;
}

.grade-chart-track {
    align-items: end;
    background: repeating-linear-gradient(
        to top,
        #f0f3f6 0,
        #f0f3f6 1px,
        transparent 1px,
        transparent 30px
    );
    border-bottom: 2px solid #4e4090;
    display: flex;
    height: 150px;
    justify-content: center;
    width: 100%;
}

.grade-chart-bar {
    background: #4e4090;
    border: 1px solid #33266f;
    min-height: 3px;
    transition: height 0.25s ease;
    width: 56%;
}

.grade-chart-label {
    align-items: center;
    background: #8f95c8;
    color: #ffffff;
    display: flex;
    justify-content: center;
    margin-top: 6px;
    min-height: 24px;
}

.grade-chart-percent {
    color: #4e4090;
    font-size: 13px;
    padding-top: 5px;
}

.status-question-card {
    background: #fbfcfd;
    border: 1px solid #c8d4df;
    border-inline-start: 4px solid #4e4090;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.status-question-card h4 {
    color: #4e4090;
    margin: 0;
}

.status-question-card label {
    color: #263747;
    font-weight: 700;
}

.status-question-card input {
    margin-top: 4px;
    max-width: 130px;
    text-align: center;
}

.grade-comment-card {
    background: #fbfcfd;
    border: 1px solid #c8d4df;
    border-inline-start: 4px solid #42aeb8;
    margin-top: 18px;
    padding: 14px;
}

.grade-comment-heading {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.grade-comment-heading h4 {
    margin-top: 0;
}

.grade-comment-card textarea {
    border: 1px solid #9fb0bf;
    box-sizing: border-box;
    font: inherit;
    line-height: 1.5;
    min-height: 150px;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

.grade-comment-card.is-generating textarea {
    background: #f8fafb;
}

.grade-comment-models {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 10px 0 12px;
}

.grade-comment-model-option {
    align-items: flex-start;
    background: #f4f8fb;
    border: 1px solid #b7c8d5;
    display: flex;
    gap: 9px;
    padding: 9px 10px;
}

.grade-comment-model-option input {
    margin-top: 2px;
}

.grade-comment-model-option strong {
    color: #183247;
    display: block;
}

.grade-comment-model-option small {
    color: #53677a;
    display: block;
    line-height: 1.35;
    margin-top: 2px;
}

.grade-comment-progress {
    background: #f4f8fb;
    border: 1px solid #9fb7c7;
    margin-bottom: 10px;
    padding: 10px 12px;
}

.grade-comment-progress-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.grade-comment-progress-track {
    background: #d9e2ea;
    border: 1px solid #9fb0bf;
    height: 14px;
    overflow: hidden;
}

.grade-comment-progress-track span {
    background: #2f6587;
    display: block;
    height: 100%;
    transition: width 0.4s ease;
    width: 0%;
}

.grade-comment-progress small {
    color: #53677a;
    display: block;
    margin-top: 6px;
}

.grade-comment-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.model-pill {
    background: #eef3f7;
    border: 1px solid #b7c4cf;
    color: #263747;
    font-weight: 700;
    padding: 4px 8px;
}

.inline-warning {
    background: #fff7e7;
    border: 1px solid #e3bd72;
    color: #6f4b0b;
    margin-bottom: 10px;
    padding: 8px 10px;
}

.inline-warning.inline-success {
    background: #eef8f0;
    border-color: #8ac49b;
    color: #245d34;
}

@media (max-width: 900px) {
    .topbar,
    .userbar,
    .page-title,
    .action-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar {
        height: auto;
        gap: 10px;
        padding: 12px 16px;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-bottom: 1px solid var(--line);
        border-inline-end: 0;
        padding: 0;
    }

    .side-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .side-nav a {
        border-top: 0;
        text-align: center;
    }

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

    .upload-form {
        grid-template-columns: 1fr;
    }

    .manual-form {
        grid-template-columns: 1fr;
    }

    .coursework-grid,
    .two-column-review,
    .outcome-layout,
    .outcome-manual-grid,
    .spec-command-grid,
    .pending-spec-layout {
        grid-template-columns: 1fr;
    }

    .spec-report-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-form {
        grid-template-columns: 1fr;
    }

    .page {
        padding: 16px;
    }

    .table-panel {
        overflow-x: auto;
    }
}

/* -------------------------------------------------------------------------
   PCAP interface system
   A restrained academic dashboard layer that standardizes existing templates
   without changing their backend contracts or interactive behavior.
   ------------------------------------------------------------------------- */

:root {
    --pcap-bg: #f3eee5;
    --pcap-surface: #ffffff;
    --pcap-surface-alt: #fbfaf7;
    --pcap-ink: #172231;
    --pcap-ink-soft: #526174;
    --pcap-border: #d5cabc;
    --pcap-border-strong: #8798aa;
    --pcap-primary: #245d7f;
    --pcap-primary-dark: #183f59;
    --pcap-accent: #2f9ca8;
    --pcap-danger: #a52a26;
    --pcap-warning: #9a6a12;
    --pcap-success: #247245;
    --pcap-radius: 6px;
    --pcap-shadow: 0 2px 5px rgba(54, 42, 29, 0.10), 0 10px 24px rgba(16, 34, 53, 0.05);
    --pcap-shadow-raised: 0 14px 30px rgba(54, 42, 29, 0.13), 0 8px 22px rgba(16, 34, 53, 0.07);
    --pcap-sidebar-width: 232px;
    --pcap-table-header: #e6eef5;
    --pcap-section-header: #f3f7f0;
    --pcap-focus: 0 0 0 3px rgba(47, 156, 168, 0.28);
}

body {
    background:
        linear-gradient(180deg, #f7f3ec 0%, #f1eadf 42%, #ece8df 100%);
    color: var(--pcap-ink);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    box-shadow: var(--pcap-focus);
    outline: 0;
}

.topbar {
    background: #1d3145;
    box-shadow: 0 1px 0 rgba(15, 28, 44, 0.25);
    height: 56px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 60;
}

.brand {
    gap: 14px;
}

.brand-mark {
    font-size: 20px;
}

.brand-text {
    color: #d7e2eb;
    font-size: 13px;
}

.userbar {
    gap: 10px;
}

.userbar button {
    border-color: rgba(255, 255, 255, 0.45);
    min-height: 32px;
    padding: 5px 12px;
}

.app-shell {
    grid-template-columns: var(--pcap-sidebar-width) minmax(0, 1fr);
    min-height: calc(100vh - 56px);
}

.sidebar {
    background: #fbf8f2;
    border-inline-end: 1px solid var(--pcap-border);
    box-shadow: 1px 0 0 rgba(15, 28, 44, 0.03);
    padding: 18px 0;
}

.side-nav {
    gap: 2px;
}

.side-nav-heading {
    color: #6a7887;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    padding: 16px 18px 6px;
}

.side-nav a {
    border: 0;
    border-inline-start: 3px solid transparent;
    color: #203247;
    font-size: 14px;
    padding: 11px 18px;
}

.side-nav a:first-child {
    border-top: 0;
}

.side-nav a:hover,
.side-nav a:focus {
    background: #edf3f8;
    border-inline-start-color: var(--pcap-primary);
    color: #0d263a;
    text-decoration: none;
}

.app-shell > main.main-content {
    margin-inline: auto;
    padding: 24px;
    width: 100%;
}

.main-content {
    min-width: 0;
    max-width: 1600px;
}

.page,
.page-wide,
.page-fluid-controlled {
    width: 100%;
}

.page {
    max-width: 1280px;
}

.page-wide {
    max-width: 1600px;
}

.page-fluid-controlled {
    max-width: none;
}

.app-shell > main.page-fluid-controlled {
    max-width: none;
}

.page-title {
    align-items: flex-start;
    background: transparent;
    border-bottom: 1px solid var(--pcap-border);
    gap: 16px;
    margin: 0 0 22px;
    padding: 0 0 16px;
}

.page-title h1 {
    color: var(--pcap-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.page-title p {
    color: var(--pcap-ink-soft);
    font-size: 14px;
    margin-top: 5px;
    max-width: 760px;
}

.page-subtitle {
    background: var(--pcap-surface);
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    margin: 0 0 16px;
    padding: 14px 16px;
}

.page-subtitle h2 {
    font-size: 18px;
    margin: 0;
}

.page-header,
.context-bar,
.filter-bar,
.action-toolbar,
.warning-panel,
.error-state,
.loading-state,
.empty-state,
.upload-panel,
.ai-comment-panel,
.table-shell,
.matrix-shell,
.chart-card,
.table-card,
.section-card {
    border-radius: var(--pcap-radius);
}

.page-header {
    border-bottom: 1px solid var(--pcap-border);
    margin-bottom: 22px;
    padding-bottom: 16px;
}

.page-header h1 {
    font-size: 26px;
    margin: 0 0 6px;
}

.page-header p {
    color: var(--pcap-ink-soft);
    margin: 0;
    max-width: 760px;
}

.context-bar,
.filter-bar,
.action-toolbar {
    align-items: center;
    background: var(--pcap-surface);
    border: 1px solid var(--pcap-border);
    box-shadow: var(--pcap-shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.context-bar .context-item,
.filter-bar label {
    display: grid;
    gap: 5px;
}

.context-bar span,
.filter-bar span {
    color: var(--pcap-ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.context-bar strong {
    color: var(--pcap-ink);
}

.action-toolbar {
    justify-content: space-between;
}

.table-shell,
.matrix-shell {
    border: 1px solid var(--pcap-border);
    overflow: auto;
}

.matrix-shell {
    border: 2px solid #34495d;
    max-height: 72vh;
}

.warning-panel,
.error-state,
.loading-state,
.empty-state {
    border: 1px solid var(--pcap-border);
    margin-bottom: 18px;
    padding: 14px 16px;
}

.warning-panel {
    background: #fff8ea;
    border-color: #d9ae5e;
    color: #674400;
}

.error-state {
    background: #fff1f0;
    border-color: #d9938e;
    color: #7d1e1a;
}

.loading-state,
.empty-state {
    background: #f7f9fb;
    color: var(--pcap-ink-soft);
}

.ai-comment-panel {
    background: #fbfcfd;
    border: 1px solid #b7d4dc;
    border-inline-start: 4px solid var(--pcap-accent);
    box-shadow: var(--pcap-shadow);
    margin-bottom: 18px;
    padding: 16px;
}

.tabs,
.accordion,
.pagination,
.column-visibility-control {
    align-items: center;
    display: flex;
    gap: 8px;
}

.content-panel,
.section-card,
.table-card,
.chart-card,
.form-panel,
.study-container,
.spec-card,
.collapsible-panel,
.coursework-results-panel,
.coursework-matrix-panel,
.reset-coursework-panel {
    background: var(--pcap-surface);
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    margin-bottom: 18px;
    padding: 0;
}

.content-panel > h3,
.content-panel > .matrix-toolbar,
.content-panel > .spec-panel-heading,
.content-panel > summary,
.section-card > h3,
.table-card > h3,
.chart-card > h3,
.form-panel > h3 {
    background: linear-gradient(180deg, #f9fbfd 0%, #eef4f8 100%);
    border-bottom: 1px solid var(--pcap-border);
    color: var(--pcap-ink);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 13px 16px;
}

.content-panel > p,
.content-panel > form,
.content-panel > div:not(.matrix-toolbar):not(.spec-panel-heading):not(.modal-header),
.content-panel > table,
.form-panel > form {
    margin: 0;
}

.content-panel > p,
.content-panel > .alignment-legend,
.content-panel > .spec-table-wrap,
.content-panel > .pending-spec-layout,
.content-panel > .spec-report-cards,
.content-panel > .spec-report-stack,
.content-panel > .review-summary,
.content-panel > .two-column-review,
.content-panel > .review-actions,
.content-panel > .grade-distribution-table-wrap,
.content-panel > .grade-chart-card,
.content-panel > .grade-comment-card,
.content-panel > .clo-attainment-wrap,
.content-panel > .coursework-matrix-form,
.content-panel > .reset-coursework-form,
.content-panel > .stacked-form,
.content-panel > .inline-controls,
.content-panel > .spec-command-form {
    padding: 16px;
}

.content-panel > .matrix-toolbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.matrix-toolbar h3,
.matrix-toolbar p {
    margin: 0;
}

.matrix-toolbar p,
.spec-panel-heading p,
.spec-command-copy p {
    color: var(--pcap-ink-soft);
}

.button,
button,
input[type="submit"] {
    border-radius: 0;
    font-weight: 700;
    min-height: 34px;
}

.button,
button:not(.matrix-order-button):not(.row-delete-x):not(.trash-button):not(.modal-close):not(.matrix-plus-button) {
    background: #f7f9fb;
    border: 1px solid var(--pcap-border);
    color: #123047;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
}

.button:hover,
button:not(.matrix-order-button):not(.row-delete-x):not(.trash-button):not(.modal-close):not(.matrix-plus-button):hover {
    background: #edf3f8;
    text-decoration: none;
}

.button.primary,
button.primary,
.primary {
    background: var(--pcap-primary);
    border-color: var(--pcap-primary-dark);
    color: #ffffff;
}

.button.primary:hover,
button.primary:hover {
    background: var(--pcap-primary-dark);
}

.button.danger,
button.danger,
.danger {
    background: var(--pcap-danger);
    border-color: #7d1e1a;
    color: #ffffff;
}

input,
select,
textarea {
    border: 1px solid #aebdca;
    border-radius: 0;
    color: var(--pcap-ink);
    font: inherit;
    min-height: 34px;
    padding: 7px 9px;
}

textarea {
    line-height: 1.45;
}

label {
    color: #1a2c3f;
    font-weight: 700;
}

.inline-controls,
.stacked-form,
.manual-form,
.wizard-form,
.spec-grid-form,
.spec-text-form {
    gap: 14px;
}

.inline-controls {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
}

.inline-controls label,
.stacked-form label,
.spec-grid-form label,
.spec-text-form label {
    display: grid;
    gap: 6px;
}

.inline-controls select,
.inline-controls input {
    min-width: 280px;
}

.messages {
    margin: 0 0 18px;
}

.message {
    border-radius: var(--pcap-radius);
    font-weight: 600;
    padding: 11px 14px;
}

.message.success {
    background: #eef8f0;
    border-color: #8dc79d;
    color: #215f36;
}

.message.error,
.message.warning {
    background: #fff6e6;
    border-color: #d9aa58;
    color: #6f4600;
}

.classic-data-table,
.compact-study-table,
.spec-edit-table,
.coursework-preview-table,
.alignment-matrix,
.course-plo-table,
.clo-attainment-table,
.grade-distribution-table,
.coursework-results-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    width: 100%;
}

.classic-data-table th,
.classic-data-table td,
.compact-study-table th,
.compact-study-table td,
.spec-edit-table th,
.spec-edit-table td,
.alignment-matrix th,
.alignment-matrix td,
.course-plo-table th,
.course-plo-table td,
.clo-attainment-table th,
.clo-attainment-table td {
    border-bottom: 1px solid var(--pcap-border);
    border-inline-end: 1px solid var(--pcap-border);
    padding: 9px 10px;
    vertical-align: middle;
}

.classic-data-table th,
.compact-study-table th,
.spec-edit-table th,
.alignment-matrix th,
.course-plo-table th,
.clo-attainment-table th {
    background: var(--pcap-table-header);
    color: #102338;
    font-weight: 700;
    text-align: center;
}

.classic-data-table tbody tr:nth-child(even),
.compact-study-table tbody tr:nth-child(even),
.spec-edit-table tbody tr:nth-child(even) {
    background: #f9fbfc;
}

.table-panel,
.spec-table-wrap,
.alignment-matrix-wrap,
.course-plo-matrix-wrap,
.grade-distribution-table-wrap,
.clo-attainment-wrap {
    overflow: auto;
}

.table-panel table,
.spec-table-wrap table,
.alignment-matrix-wrap table,
.course-plo-matrix-wrap table {
    min-width: max-content;
}

.status-badge,
.model-pill,
code {
    background: #eef3f7;
    border: 1px solid #d3dee8;
    color: #102b42;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 2px 6px;
}

.muted-text {
    color: var(--pcap-ink-soft);
}

.metrics,
.kpi-grid,
.spec-report-cards {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.metrics article,
.kpi-card,
.spec-report-cards > div {
    background: var(--pcap-surface);
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    padding: 14px 16px;
}

.metrics span,
.kpi-card strong,
.spec-report-cards strong {
    color: var(--pcap-ink);
    font-size: 24px;
}

.metrics strong,
.kpi-card span,
.spec-report-cards span {
    color: var(--pcap-ink-soft);
    font-size: 13px;
}

/* Coursework spreadsheet mode */
.coursework-page-shell {
    display: grid;
    gap: 18px;
}

.coursework-grid,
.spec-command-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
}

.coursework-grid[hidden],
[hidden].coursework-grid {
    display: none !important;
}

.coursework-matrix-panel {
    overflow: hidden;
}

.coursework-matrix-panel > .matrix-toolbar {
    position: sticky;
    top: 56px;
    z-index: 25;
}

.coursework-matrix-wrap {
    border: 2px solid #24384c;
    max-height: calc(100vh - 280px);
    min-height: 420px;
    overflow: auto;
    padding: 0;
    position: relative;
}

.coursework-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: max-content;
}

.coursework-matrix-table th,
.coursework-matrix-table td {
    border-bottom: 1px solid #9fb1c1;
    border-inline-end: 1px solid #9fb1c1;
    padding: 7px 8px;
    vertical-align: middle;
}

.coursework-matrix-table thead th {
    border-bottom: 2px solid #1b2a39;
    border-top: 0;
    color: #102338;
    font-weight: 800;
    text-align: center;
    z-index: 15;
}

.coursework-matrix-table thead tr:nth-child(1) th { top: 0; }
.coursework-matrix-table thead tr:nth-child(2) th { top: 35px; }
.coursework-matrix-table thead tr:nth-child(3) th { top: 70px; }
.coursework-matrix-table thead tr:nth-child(4) th { top: 111px; }

.coursework-matrix-table thead th,
.coursework-matrix-table .frozen-col {
    position: sticky;
}

.coursework-matrix-table .frozen-col {
    background: #f7f9fb;
    border-inline-end: 2px solid #24384c;
    z-index: 12;
}

.coursework-matrix-table thead .frozen-col {
    z-index: 22;
}

.coursework-matrix-table tbody td {
    text-align: center;
}

.coursework-matrix-table tbody .name-col,
.coursework-matrix-table tbody td:nth-child(4) {
    text-align: start;
}

.coursework-matrix-table input,
.coursework-matrix-table select {
    min-height: 30px;
}

.coursework-matrix-table .mark-input,
.coursework-matrix-table .max-input {
    text-align: center;
}

.coursework-matrix-table .total-col,
.coursework-matrix-table .calculated-cell {
    background: #eaf2f7;
    font-weight: 800;
}

.coursework-matrix-table .category-band {
    border-top: 2px solid #1b2a39;
}

.coursework-matrix-table .subitem-header,
.coursework-matrix-table .max-header,
.coursework-matrix-table .clo-header {
    border-bottom-color: #1b2a39;
}

.row-delete-x,
.trash-button,
.column-delete-button {
    align-items: center;
    background: var(--pcap-danger);
    border: 1px solid #7d1e1a;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    min-height: 24px;
    padding: 0;
    width: 24px;
}

.matrix-plus-button {
    background: #ffffff;
    border: 1px solid var(--pcap-border-strong);
    color: var(--pcap-primary-dark);
    cursor: pointer;
    font-weight: 800;
    height: 24px;
    width: 24px;
}

.reset-coursework-panel {
    border-color: #d7938d;
}

.reset-coursework-panel > h3,
.reset-coursework-panel > div:first-child {
    background: #fff6f4;
    border-bottom: 1px solid #e1bbb7;
}

.reset-coursework-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) auto auto;
}

/* Matrix and alignment pages */
.alignment-level-stack,
.course-plo-level-stack {
    display: grid;
    gap: 16px;
}

.alignment-matrix-wrap,
.course-plo-matrix-wrap {
    border: 2px solid #34495d;
    max-height: 70vh;
}

.alignment-matrix thead th,
.course-plo-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
}

.alignment-cell,
.course-plo-cell {
    text-align: center;
}

.alignment-select {
    margin-inline: auto;
}

.plo-domain-K,
.plo-domain-Knowledge {
    background-color: #eaf5f9;
}

.plo-domain-S,
.plo-domain-Skills {
    background-color: #f1ecfa;
}

.plo-domain-V,
.plo-domain-Values {
    background-color: #f1f7ea;
}

/* Course specification pages */
.spec-command-card,
.spec-detail-card {
    overflow: hidden;
}

.spec-command-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

.spec-command-copy,
.spec-command-form {
    padding: 16px;
}

.spec-command-copy h3 {
    margin: 0 0 6px;
}

.spec-detail-workspace,
.spec-workspace {
    display: grid;
    gap: 18px;
}

.spec-detail-card summary,
.collapsible-panel summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.spec-detail-card summary::-webkit-details-marker,
.collapsible-panel summary::-webkit-details-marker {
    display: none;
}

.spec-detail-card summary span,
.collapsible-panel summary {
    font-weight: 800;
}

.spec-detail-card summary em {
    color: var(--pcap-ink-soft);
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 3px;
}

.spec-detail-card summary small,
.collapsible-panel summary span {
    background: #ffffff;
    border: 1px solid var(--pcap-border);
    color: var(--pcap-primary-dark);
    min-width: 28px;
    padding: 2px 8px;
    text-align: center;
}

.spec-grid-form,
.spec-text-form {
    padding: 16px;
}

.spec-grid-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spec-grid-form .span-2 {
    grid-column: span 2;
}

.spec-grid-form .span-3 {
    grid-column: 1 / -1;
}

.spec-edit-table {
    table-layout: fixed;
}

.spec-edit-table th,
.spec-edit-table td {
    vertical-align: middle;
}

.spec-edit-table textarea {
    min-height: 78px;
    resize: vertical;
    width: 100%;
}

.spec-field-code,
.spec-field-plo {
    text-align: center;
    width: 90px;
}

.spec-field-action {
    text-align: center;
    width: 140px;
}

.inline-row-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

.clo-domain-row td {
    background: #45aeb8 !important;
    color: #ffffff;
    font-weight: 800;
}

/* Academic analysis blocks */
.coursework-results-panel {
    border-inline-start: 4px solid #4e4090;
}

.grade-distribution-table,
.clo-attainment-table {
    max-width: 1120px;
}

.grade-chart-card {
    background: var(--pcap-surface);
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
}

.grade-comment-card {
    border-radius: var(--pcap-radius);
}

.clo-attainment-table th,
.clo-attainment-table td {
    text-align: center;
}

.clo-attainment-table td:nth-child(2) {
    text-align: start;
}

@media (max-width: 1100px) {
    .coursework-grid,
    .spec-command-grid,
    .spec-grid-form {
        grid-template-columns: 1fr;
    }

    .app-shell > main.page {
        padding: 18px;
    }
}

/* PCAP UI pass 2: high-density academic workspaces */
[hidden] {
    display: none !important;
}

.page-title {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--pcap-border);
    border-inline-start: 4px solid var(--pcap-primary);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 18px 20px;
}

.page-title h1 {
    color: var(--pcap-ink);
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.page-title p {
    color: var(--pcap-ink-soft);
    font-size: 14px;
    max-width: 860px;
}

.page-subtitle {
    background: #ffffff;
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    margin: 0 0 16px;
    padding: 14px 18px;
}

.page-subtitle h2 {
    font-size: 17px;
    line-height: 1.35;
    margin: 0;
}

.messages {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.message {
    border-radius: var(--pcap-radius);
    border-width: 1px;
    font-weight: 650;
    padding: 12px 14px;
}

.message.success {
    background: #edf8ef;
    border-color: #a9d8b4;
    color: #1d6532;
}

.message.error {
    background: #fff0ef;
    border-color: #e0a5a0;
    color: #922b21;
}

.message.warning {
    background: #fff8e8;
    border-color: #e3c377;
    color: #7a5600;
}

.content-panel {
    background: #ffffff;
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.content-panel > h3,
.content-panel > summary,
.content-panel > .matrix-toolbar,
.content-panel > .spec-panel-heading {
    background: linear-gradient(180deg, #f9fbfc 0%, #eef4f8 100%);
    border-bottom: 1px solid var(--pcap-border);
}

.content-panel > h3 {
    color: var(--pcap-ink);
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    padding: 13px 16px;
}

.content-panel > p {
    color: var(--pcap-ink-soft);
    padding: 12px 16px;
}

.inline-controls,
.stacked-form,
.upload-form,
.access-form,
.spec-command-form {
    gap: 14px;
}

.inline-controls label,
.stacked-form label,
.upload-form label,
.access-form label,
.spec-command-form label {
    color: var(--pcap-ink);
    font-weight: 750;
}

input,
select,
textarea {
    border: 1px solid var(--pcap-border-strong);
    border-radius: 0;
    color: var(--pcap-ink);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
    outline: 2px solid var(--pcap-accent);
    outline-offset: 2px;
}

.button,
button:not(.matrix-order-button):not(.row-delete-x):not(.column-delete-x):not(.trash-button):not(.modal-close):not(.matrix-plus-button) {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--pcap-border);
    color: var(--pcap-primary-dark);
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    text-decoration: none;
}

.button.primary,
button.primary,
button[name="action"][value*="save"],
button[name="action"][value*="Save"] {
    background: var(--pcap-primary);
    border-color: var(--pcap-primary);
    color: #ffffff;
}

.button.danger,
button.danger {
    background: #a8342c;
    border-color: #a8342c;
    color: #ffffff;
}

.table-shell,
.matrix-shell,
.spec-table-wrap,
.alignment-matrix-wrap,
.coursework-matrix-wrap {
    background: #ffffff;
    border: 1px solid var(--pcap-border-strong);
    overflow: auto;
}

.compact-study-table,
.classic-data-table,
.spec-edit-table,
.alignment-matrix,
.course-plo-matrix,
.coursework-results-table,
.clo-attainment-table {
    border-collapse: collapse;
    color: var(--pcap-ink);
    font-size: 14px;
}

.compact-study-table th,
.compact-study-table td,
.classic-data-table th,
.classic-data-table td,
.spec-edit-table th,
.spec-edit-table td,
.alignment-matrix th,
.alignment-matrix td,
.course-plo-matrix th,
.course-plo-matrix td {
    border: 1px solid var(--pcap-border-strong);
    padding: 9px 10px;
    vertical-align: middle;
}

.compact-study-table th,
.classic-data-table th,
.spec-edit-table th,
.alignment-matrix th,
.course-plo-matrix th {
    background: var(--pcap-table-head);
    color: var(--pcap-ink);
    font-weight: 850;
    text-align: center;
}

.compact-study-table td,
.classic-data-table td,
.spec-edit-table td {
    line-height: 1.45;
}

.center-cell,
.spec-field-code,
.spec-field-plo,
.spec-field-action,
.alignment-cell,
.clo-symbol-cell,
.course-plo-cell {
    text-align: center;
}

.access-grid,
.spec-command-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Coursework: spreadsheet mode */
.coursework-page-shell.has-matrix .coursework-grid {
    display: none !important;
}

.coursework-page-shell.has-matrix {
    display: grid;
    gap: 16px;
}

.reset-coursework-panel {
    border-color: #dca3a0;
    border-inline-start: 4px solid #a8342c;
}

.reset-coursework-panel > div:first-child {
    background: #fff7f6;
    border-bottom: 1px solid #e4b9b6;
    padding: 14px 16px;
}

.reset-coursework-panel h3 {
    color: #8d211a;
    margin: 0 0 6px;
}

.reset-coursework-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    padding: 14px 16px;
}

.coursework-matrix-panel {
    border-inline-start: 4px solid var(--pcap-success);
}

.coursework-page-shell.has-matrix .coursework-matrix-panel {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 250px);
    min-height: 560px;
}

.coursework-matrix-panel > .matrix-toolbar {
    flex: 0 0 auto;
}

.coursework-matrix-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 14px 16px;
}

.coursework-matrix-wrap {
    flex: 1 1 auto;
    min-height: 360px;
    position: relative;
}

.coursework-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: max-content;
}

.coursework-matrix-table thead {
    position: sticky;
    top: 0;
    z-index: 60;
}

.coursework-matrix-table thead th {
    background-clip: padding-box;
    border-color: #1f2c38;
    border-width: 1px;
    box-shadow: inset 0 1px 0 #1f2c38, inset 0 -1px 0 #1f2c38;
    color: var(--pcap-ink);
    position: static;
    text-align: center;
    vertical-align: middle;
}

.coursework-matrix-table thead tr:first-child th {
    border-top-width: 3px;
}

.coursework-matrix-table thead tr:last-child th {
    border-bottom-width: 3px;
}

.coursework-matrix-table th,
.coursework-matrix-table td {
    border: 1px solid #91a8ba;
    height: auto;
    min-height: 40px;
    padding: 7px 8px;
    vertical-align: middle;
}

.coursework-matrix-table .frozen-col {
    background: #f8fafc;
    border-color: #496174;
    position: sticky;
    z-index: 20;
}

.coursework-matrix-table thead .frozen-col {
    z-index: 70;
}

.coursework-matrix-table .row-action-col {
    left: 0;
    min-width: 42px;
    width: 42px;
}

.coursework-matrix-table .narrow-col {
    left: 42px;
    min-width: 70px;
    width: 70px;
}

.coursework-matrix-table .id-col {
    left: 112px;
    min-width: 130px;
    width: 130px;
}

.coursework-matrix-table .name-col {
    left: 242px;
    min-width: 260px;
    text-align: start;
    width: 260px;
}

.coursework-matrix-table tbody td {
    background-clip: padding-box;
    text-align: center;
}

.coursework-matrix-table tbody td:nth-child(4) {
    text-align: start;
}

.coursework-matrix-table .mark-input,
.coursework-matrix-table .max-input,
.coursework-matrix-table select {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.coursework-matrix-table .category-band {
    border-top: 3px solid #1f2c38;
    font-weight: 900;
}

.coursework-matrix-table .subtotal-header,
.coursework-matrix-table .total-col,
.coursework-matrix-table .calculated-cell {
    background: #edf4f8;
    font-weight: 900;
}

.matrix-toolbar {
    gap: 12px;
    padding: 14px 16px;
}

.matrix-toolbar h3 {
    font-size: 18px;
}

.matrix-toolbar-actions {
    flex-wrap: wrap;
}

/* Alignment matrices */
.alignment-level-stack,
.course-plo-level-stack {
    display: grid;
    gap: 18px;
}

.alignment-matrix-wrap,
.course-plo-level-panel .alignment-matrix-wrap {
    border: 2px solid #34495d;
    max-height: 72vh;
}

.alignment-matrix,
.course-plo-matrix {
    min-width: 1120px;
    table-layout: fixed;
    width: 100%;
}

.alignment-matrix thead th,
.course-plo-matrix thead th {
    border-bottom: 3px solid #34495d;
    position: sticky;
    top: 0;
    z-index: 12;
}

.alignment-matrix tbody tr.course-group-start > td,
.course-plo-matrix tbody tr.level-group-start > td {
    border-top: 3px solid #111827;
}

.merged-course-cell {
    background: #f4f8fb;
    font-weight: 750;
    text-align: center;
    vertical-align: middle !important;
}

.alignment-select {
    margin-inline: auto;
}

.plo-domain-knowledge {
    background-color: #eaf5fa;
}

.plo-domain-skills {
    background-color: #f2edf9;
}

.plo-domain-values {
    background-color: #eef8eb;
}

/* Course specification detail */
.spec-title {
    border-inline-start-color: #576a9b;
}

.spec-detail-workspace {
    display: grid;
    gap: 18px;
}

.spec-detail-card {
    border-inline-start-width: 4px;
}

.spec-section-identity { border-inline-start-color: #54708c; }
.spec-section-description { border-inline-start-color: #7b628f; }
.spec-section-clo { border-inline-start-color: #3ca9b0; }
.spec-section-topics { border-inline-start-color: #8a7445; }
.spec-section-assessment_activities { border-inline-start-color: #6b7fb0; }
.spec-section-contact_hours { border-inline-start-color: #2f7f88; }
.spec-section-teaching_modes { border-inline-start-color: #9a7a3a; }
.spec-section-learning_resources { border-inline-start-color: #57885c; }
.spec-section-required_facilities { border-inline-start-color: #7d6690; }
.spec-section-quality_assessment { border-inline-start-color: #a6655d; }

.spec-detail-card summary {
    padding: 14px 16px;
}

.spec-detail-card summary span {
    font-size: 16px;
}

.spec-grid-form {
    gap: 14px;
    padding: 16px;
}

.spec-text-form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.spec-table-wrap {
    margin: 16px;
    max-width: max-content;
}

.spec-clo-table {
    min-width: 1160px;
    table-layout: fixed;
}

.spec-document-table {
    table-layout: auto;
    width: auto;
}

.spec-clo-table th,
.spec-clo-table td,
.spec-document-table th,
.spec-document-table td {
    vertical-align: middle;
}

.spec-clo-table th,
.spec-document-table th {
    text-align: center;
}

.spec-clo-table .spec-field-outcome {
    width: 360px;
}

.spec-clo-table .spec-field-strategies,
.spec-clo-table .spec-field-assessment {
    width: 240px;
}

.spec-document-table textarea,
.spec-clo-table textarea {
    line-height: 1.45;
    min-height: 54px;
}

.spec-document-table textarea:disabled,
.spec-clo-table textarea:disabled,
.spec-clo-table input:disabled {
    background: transparent;
    border-color: transparent;
    opacity: 1;
}

.inline-row-actions {
    flex-wrap: nowrap;
}

.trash-button,
.trash-check span,
.row-delete-x,
.column-delete-x {
    background: #b72d27;
    border: 1px solid #9f241f;
    color: #ffffff;
    font-weight: 900;
    min-height: 28px;
    min-width: 28px;
    padding: 3px 7px;
}

.trash-check {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.trash-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.trash-check input:checked + span {
    outline: 2px solid #111827;
}

/* Analysis cards */
.coursework-results-panel {
    border-inline-start: 4px solid #4e4090;
}

.grade-chart-card,
.grade-comment-card,
.clo-attainment-panel {
    background: #ffffff;
    border: 1px solid var(--pcap-border);
    border-radius: var(--pcap-radius);
    box-shadow: var(--pcap-shadow);
}

.grade-chart-card {
    padding: 16px;
}

.grade-comment-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.grade-comment-actions {
    align-items: center;
}

.clo-attainment-table {
    border-collapse: collapse;
    max-width: 1120px;
}

.clo-attainment-table th,
.clo-attainment-table td {
    border: 1px solid #ffffff;
    padding: 10px 12px;
    vertical-align: middle;
}

.clo-attainment-table th {
    background: #4d3f91;
    color: #ffffff;
    text-align: center;
}

.clo-attainment-table .clo-domain-row th {
    background: #4fb3bd;
    color: #ffffff;
    font-size: 15px;
    text-align: start;
}

.clo-attainment-table td:nth-child(2) {
    text-align: start;
}

@media (max-width: 1100px) {
    .access-grid,
    .spec-command-grid,
    .reset-coursework-form {
        grid-template-columns: 1fr;
    }

    .page-title {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
}