/**
 * Base styles – Student Dashboard Portal
 * Uses variables from variables.css
 */

@import "variables.css";

/* Body – fixed viewport height; only main-and-library-wrap scrolls */
body {
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-regular);
    background-color: var(--page-bg);
    color: var(--base-900);
    height: 100vh;
    overflow: hidden;
}

/* Type scale classes */
.text-header {
    font-size: var(--text-header-size);
    font-weight: var(--text-header-weight);
    line-height: 1.2;
}

.text-title {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    line-height: 1.3;
}

.text-body {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-regular);
}

.text-body-semibold {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
}

.text-body-small {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

/* Optional: Bootstrap overrides using design tokens */
.btn {
    --bs-btn-bg: var(--base-200);
    --bs-btn-border-color: var(--base-200);
    --bs-btn-color: var(--base-900);
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
}

.text-muted {
    color: var(--base-700) !important;
}

/* Lucide icon sizing when used as <img> */
.lucide-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    display: inline-block;
}

.lucide-icon-sm {
    width: 1em;
    height: 1em;
}

.lucide-icon-lg {
    width: 1.5em;
    height: 1.5em;
}

/* ========== Main content ========== */
.main-and-library-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    margin: 12px;
    margin-left: 0;
    border-radius: 12px;
    padding-bottom: 12px;
}

.main-content {
    background-color: var(--page-bg);
}

    /* Two-column layout: center larger, right smaller */
    .main-content .row {
        align-items: stretch;
    }

/* Header card (center): fixed height when illustration is shown; text scrolls if needed */
.header-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0 24px; /* padding only on left; illustration has no padding */
    background-color: var(--primary);
    height: 250px;
    min-height: 250px;
    max-height: 250px;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}

/* Toolbar: breadcrumbs + search + semester (see .dashboard-toolbar-card in index.html) */
.dashboard-header-toolbar {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dashboard-header-toolbar--semester {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dashboard-header-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    width: 360px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--base-200);
    border-radius: 8px;
    background-color: var(--base-50);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.dashboard-header-search-wrap {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.dashboard-header-search-placeholder {
    flex: 1;
    min-width: 0;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-600);
    text-align: left;
}

.dashboard-header-search-wrap:hover,
.dashboard-header-search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--base-900) 10%, var(--base-200));
    box-shadow: none;
}

.dashboard-header-search-wrap:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dashboard-header-search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.dashboard-header-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-900);
    outline: none;
}

    .dashboard-header-search-input::placeholder {
        color: var(--base-700);
    }

.dashboard-header-semester {
    width: 100%;
    min-width: 0;
}

    .dashboard-header-semester .header-semester-dropdown {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-header-semester .header-card-semester-dropdown {
        width: 100%;
        box-sizing: border-box;
    }

    /* Subtle neutral border for semester control (matches app borders) */
    .dashboard-header-semester .header-card-semester-dropdown,
    .dashboard-header-semester .header-modal-trigger.header-card-semester-dropdown {
        border: 1px solid var(--base-200) !important;
        border-color: var(--base-200) !important;
    }

        .dashboard-header-semester .header-card-semester-dropdown:hover,
        .dashboard-header-semester
        .header-modal-trigger.header-card-semester-dropdown:hover {
            border-color: color-mix( in srgb, var(--base-900) 10%, var(--base-200) ) !important;
            background-color: var(--base-50) !important;
            color: var(--base-900) !important;
        }

            .dashboard-header-semester
            .header-card-semester-dropdown:hover
            .benefits-details-icon {
                filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
            }

/* Dashboard toolbar card: breadcrumbs (start) + search + semester (end) */
.dashboard-toolbar-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 12px 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    box-sizing: border-box;
}

.dashboard-toolbar-breadcrumbs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    line-height: 1.45;
}

.dashboard-toolbar-crumb {
    text-decoration: none;
    font-weight: var(--text-body-small-weight);
}

a.dashboard-toolbar-crumb {
    color: var(--base-600);
}

    a.dashboard-toolbar-crumb:hover {
        color: var(--primary);
    }

.dashboard-toolbar-crumb--current {
    color: var(--base-900);
    font-weight: 600;
}

.dashboard-toolbar-semester-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--primary-bg-light);
    color: var(--primary);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    line-height: 1.25;
    white-space: nowrap;
}

.dashboard-toolbar-breadcrumb-chevron {
    flex-shrink: 0;
    color: var(--base-600);
}

.dashboard-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}

    .dashboard-toolbar-actions .dashboard-header-toolbar {
        width: auto;
        flex: 0 0 auto;
        min-width: 0;
    }

    .dashboard-toolbar-actions .dashboard-header-toolbar--semester {
        width: 260px;
        flex: 0 0 260px;
        max-width: 100%;
    }

    .dashboard-toolbar-actions .dashboard-header-toolbar--semester-with-alert {
        width: min(780px, 100%);
        flex: 1 1 700px;
    }

.dashboard-header-toolbar--semester-with-alert {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

    .dashboard-header-toolbar--semester-with-alert .dashboard-header-semester {
        flex: 0 0 260px;
        max-width: 260px;
    }

.dashboard-header-semester-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--warning-light));
    border-radius: 8px;
    background-color: var(--warning-light);
    color: color-mix(in srgb, var(--warning) 78%, var(--base-900));
    line-height: 1.35;
}

.dashboard-header-semester-alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(72%) sepia(66%) saturate(786%) hue-rotate(349deg) brightness(103%) contrast(102%);
}

@media (max-width: 1399.98px) {
    .dashboard-header-toolbar--semester-with-alert {
        flex-direction: column;
        gap: 6px;
    }

        .dashboard-header-toolbar--semester-with-alert .dashboard-header-semester {
            flex: 0 0 auto;
            max-width: 100%;
        }
}

/* Header + announcements: use Bootstrap row .benefits-layout-row + .header-announcement-row (see index.html) */

.header-card-left {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    /* No fixed right padding — spacing to the image comes from .header-card gap */
    padding: 24px 0 24px 0;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.header-card-date {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-50);
    flex-shrink: 0;
}

.header-card-date-greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.header-card-top-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

.header-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 16px;
    background-color: color-mix( in srgb, var(--primary-bg-light) 20%, transparent );
    color: var(--base-50);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    border-radius: 24px;
    width: fit-content;
    flex-shrink: 0;
}

.header-card-badge-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.header-card-greeting {
    font-size: var(--text-header-size);
    font-weight: var(--text-header-weight);
    color: var(--base-50);
    margin: 0;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.header-card-description {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    line-height: 1.45;
    color: color-mix(in srgb, var(--base-50) 78%, transparent);
    width: 100%;
    max-width: min(100%, 22rem);
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Max 2 lines, then ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-card-program,
.header-card-semester {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-50);
    margin: 0;
}

.header-card-quick-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    min-width: 0;
}

.header-modal-trigger--spread {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 240px;
    text-align: left;
}

.header-trigger-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.header-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-trigger-ellipsis {
    flex-shrink: 0;
}

.header-card-actions-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    min-width: 0;
}

    .header-card-actions-row .header-card-quick-actions {
        margin-top: 0;
    }

.header-card-semester-dropdown {
    min-width: 220px;
}

    .header-card-semester-dropdown .benefits-details-label {
        color: var(--base-700);
    }

    .header-card-semester-dropdown .benefits-details-value {
        color: var(--base-900);
    }

    .header-card-semester-dropdown.benefits-details {
        justify-content: space-between;
        text-align: left;
    }

    .header-card-semester-dropdown .benefits-details-text {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

.header-semester-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-semester-caption {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--base-700);
    margin-bottom: 2px;
}

.header-semester-main-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.header-semester-text-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}

.header-semester-main-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.header-card-semester-dropdown:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

    .header-card-semester-dropdown:hover .benefits-details-icon {
        filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
    }

.header-semester-dropdown {
    width: 260px;
    max-width: 100%;
    flex-shrink: 0;
}

    .header-semester-dropdown .header-card-semester-dropdown {
        width: 100%;
        cursor: pointer;
    }

    .header-semester-dropdown .dropdown-content {
        width: 100%;
        right: 0;
        left: 0;
        z-index: 2000;
    }

.header-modal-trigger {
    background-color: var(--base-50);
    background: var(--base-50) !important;
    border-color: color-mix(in srgb, var(--base-900) 12%, transparent);
    color: var(--base-900);
}

    .header-modal-trigger:hover {
        background-color: var(--base-50);
        background: var(--base-50) !important;
        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
        color: var(--base-900);
    }

.header-modal-trigger-avatar {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

/* CSS-only modal */
.simple-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1050;
}

    .simple-modal:target {
        display: flex;
    }

.simple-modal--search .simple-modal-card {
    max-width: 640px;
}

.modal-search-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--base-200));
    border-radius: 8px;
    background-color: var(--base-50);
    cursor: text;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .modal-search-field-wrap:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-bg-light);
    }

.modal-search-field-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.modal-search-field-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.modal-search-field-wrap:has(.modal-search-input:not(:placeholder-shown))
.modal-search-field-arrow {
    opacity: 1;
}

.modal-search-field-wrap:has(.modal-search-input:not(:placeholder-shown))
.modal-search-input {
    padding-right: 32px;
}

.modal-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: var(--text-body-weight-regular);
    color: var(--base-900);
    outline: none;
}

    .modal-search-input::placeholder {
        color: var(--base-600);
        font-size: var(--text-body-small-size);
        font-weight: var(--text-body-small-weight);
    }

    /* Hide browser default clear (X) on type="search" */
    .modal-search-input::-webkit-search-cancel-button,
    .modal-search-input::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .modal-search-input::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

.simple-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.simple-modal-card {
    position: relative;
    width: 100%;
    /* max-width: 520px;*/
    background: var(--base-50);
    border-radius: 12px;
    border: 1px solid var(--base-200);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    padding: 18px;
}

.simple-modal-header {
    display: flex;
    align-items: center;
    /*align-items: flex-start;*/
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.simple-modal-header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.simple-modal-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.simple-modal-header-text {
    min-width: 0;
}

.simple-modal-section-title {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
}

.simple-modal-skills {
    margin-top: 8px;
}

.simple-modal#modal-advisor .profile-skill-badge {
    background-color: var(--primary-bg-light);
    color: var(--primary);
    font-size: 14px;
}

.simple-modal-title {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    color: var(--base-900);
    line-height: 1.2;
}

.simple-modal-subtitle {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-regular);
    color: var(--base-700);
}

.simple-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--base-900);
    background: var(--base-50);
    line-height: 1;
    font-size: 40px;
}

    .simple-modal-close:hover {
        color: var(--primary);
        background: var(--primary-bg-light);
    }

.simple-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: nowrap;
}

.simple-modal-actions--spaced {
    padding-top: 12px;
}

.btn-ghost {
    border: none !important;
    background: transparent !important;
}

    .btn-ghost:hover,
    .btn-ghost:focus-visible {
        border: none !important;
        background-color: var(--base-75) !important;
        color: var(--base-900) !important;
    }

.announcements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.announcement-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 10px;
    background: var(--primary-bg-light);
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.announcement-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.announcement-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.announcement-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.announcement-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Icon color: primary */
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.announcement-text {
    min-width: 0;
}

    .announcement-text > .todo-details-meta:first-child {
        margin-bottom: 0.5rem;
    }

.announcement-title {
    color: var(--base-900);
    font-weight: var(--text-body-weight-semibold);
}

.announcement-subtitle {
    color: var(--base-700);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 2;*/
    line-clamp: 2;
    overflow: hidden;
}

.announcement-time {
    color: var(--base-700);
    white-space: nowrap;
    flex-shrink: 0;
}

.simple-modal-separator {
    height: 1px;
    background-color: var(--base-200);
    margin: 0 0 12px 0;
}

/* Scrollable modal regions: thin neutral scrollbar */
.simple-modal-body--custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--base-900) 22%, var(--base-200)) transparent;
}

    .simple-modal-body--custom-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .simple-modal-body--custom-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .simple-modal-body--custom-scroll::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--base-900) 16%, var(--base-200));
        border-radius: 100px;
    }

        .simple-modal-body--custom-scroll::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--base-900) 28%, var(--base-200));
        }

/* Primary submit in modals: no brightness/filter hover animation */
.simple-modal .simple-modal-submit-btn.btn-primary,
.simple-modal .simple-modal-submit-btn.btn-primary:hover,
.simple-modal .simple-modal-submit-btn.btn-primary:focus-visible,
.simple-modal .simple-modal-submit-btn.btn-primary:active {
    filter: none !important;
    background: var(--primary) !important;
    color: var(--base-50) !important;
    border-color: var(--primary) !important;
    transition: none !important;
}

.simple-modal-action-btn {
    flex: 1 1 0;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Modal action buttons: use default button hover behavior */

@media (max-width: 575.98px) {
    .simple-modal-actions {
        flex-wrap: wrap;
    }
}

/* Image column shrinks first as the card narrows (fluid width + max %) */
.header-card-right {
    flex: 0 1 300px;
    align-self: stretch;
    width: clamp(96px, 26vw, 300px);
    max-width: min(300px, 42%);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.header-card-illustration {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(200px, 100%);
    object-fit: contain;
    object-position: right center;
}

/* Keep a sensible floor width when the illustration is visible (tablet/desktop) */
@media (min-width: 768px) {
    .header-card {
        min-width: 360px;
    }

    .header-card-left {
        min-width: 200px;
    }
}

/* Notice card (center, below course subjects) – layout similar to header card */
.notice-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-top: 24px;
    padding: 0 0 0 24px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    overflow: hidden;
}

.notice-card-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 24px 24px 24px 0;
}

.notice-card-time {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--primary);
}

.notice-card-title {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-regular);
    color: var(--base-900);
}

.notice-card-desc {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
}

.notice-card-right {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.notice-card-illustration {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: right center;
}

/* Course Subjects data grid (center, below header card) */
.course-subjects {
    margin-top: 0px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--base-200);
}

/* Design system preview (Additional Resources / Q&A): white surface behind table */
.course-subjects--design-system {
    background-color: var(--base-50);
}

.course-subjects-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.course-subjects-header-left {
    min-width: 0;
}

.course-subjects-title {
    color: var(--base-900);
}

.course-subjects-subtitle {
    color: var(--base-700);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

.course-subjects-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    min-width: 200px;
    border: 1px solid var(--base-200);
    border-radius: 8px;
    background-color: var(--base-50);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .course-subjects-search-wrap:hover,
    .course-subjects-search-wrap:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

.course-subjects-search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
    filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.course-subjects-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-900);
    outline: none;
}

    .course-subjects-search-input::placeholder {
        color: var(--base-700);
    }

.course-subjects-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    overflow: hidden;
}

.course-subjects-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

    .course-subjects-table th,
    .course-subjects-table td {
        padding: 20px 16px;
        text-align: left;
        border: none;
        border-bottom: 1px solid var(--base-200);
        font-size: var(--text-body-size);
        font-weight: var(--text-body-weight-regular);
    }

    .course-subjects-table thead tr {
        background-color: var(--base-100);
    }

    .course-subjects-table thead th {
        font-weight: var(--text-body-weight-semibold);
        color: var(--base-900);
        vertical-align: middle;
        white-space: nowrap;
    }

    .course-subjects-table tbody td {
        color: var(--base-700);
    }

        .course-subjects-table tbody td:nth-child(3),
        .course-subjects-table tbody td:nth-child(7) {
            color: var(--base-900);
        }

    .course-subjects-table td time {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Duplicated tables (Communication + Course Details): spacing + highlighted header */
    .course-subjects-table[data-duplicated-copy="true"] {
        margin-bottom: 20px;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--base-200);
        border-radius: 10px;
        overflow: hidden;
    }

        .course-subjects-table[data-duplicated-copy="true"] thead tr {
            background-color: var(--primary);
        }

        .course-subjects-table[data-duplicated-copy="true"] thead th {
            color: var(--base-50);
            border-bottom-color: color-mix(in srgb, var(--primary) 72%, var(--base-50));
        }

            .course-subjects-table[data-duplicated-copy="true"] thead th:first-child {
                border-top-left-radius: 10px;
            }

            .course-subjects-table[data-duplicated-copy="true"] thead th:last-child {
                border-top-right-radius: 10px;
            }

/* Course History: course code — one line + book-check */
.course-subjects-table-course-cell {
    white-space: nowrap;
    vertical-align: middle;
    max-width: 14rem;
}

.course-subjects-table-course-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.course-subjects-table-course-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.course-subjects-table-course-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    color: var(--base-900);
    margin: 0;
}

/* Course History: cert date — calendar-check + time */
.course-subjects-table-date-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.course-subjects-table-date-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.course-subjects-table-date-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

/* Communication page tables: readable dates + single-line sent-by with icon */
.communications-table .communications-table-date-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.communications-table .communications-table-date-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.communications-table .communications-table-date-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.communications-table .communications-table-sent-by-cell {
    white-space: nowrap;
    vertical-align: middle;
    max-width: 240px;
}

.communications-table .communications-table-sent-by {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.communications-table .communications-table-sent-by-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.communications-table .communications-table-sent-by-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badges (same style as header badge: padding, radius) */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    border-radius: 24px;
    width: fit-content;
}

.status-badge--approved {
    background-color: var(--success-light);
    color: var(--success);
}

.status-badge--pending {
    background-color: var(--warning-light);
    color: var(--warning);
}

.status-badge--not-approved {
    background-color: var(--danger-light);
    color: var(--danger);
}

.status-badge--registered {
    background-color: var(--success-light);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/*.status-badge--registered::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/circle-check.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  filter: invert(49%) sepia(82%) saturate(854%) hue-rotate(102deg)
    brightness(89%) contrast(101%);
}*/

.course-subjects-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.course-subjects-pagination-info {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
}

.course-subjects-pagination-buttons {
    display: flex;
    gap: 8px;
}

.course-subjects-pagination-btn {
    padding: 8px;
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    cursor: pointer;
    border-radius: 4px;
}

/* Right side: benefit card – white bg, base-200 border, 12px radius */
.benefit-card {
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

/* Announcement card next to header (column width capped via .benefits-layout-row) */
.announcement-card {
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 250px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

    /* Truncate the announcements list with a fade at the bottom */
    .announcement-card .announcements-list {
        position: relative;
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }

        .announcement-card .announcements-list::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--base-50));
            pointer-events: none;
        }

/* Withdraw & Drop card (Course History): same fixed height as .header-card / .announcement-card (250px) */
.withdraw-drop-card {
    /* inherits .announcement-card height: 250px — do not set height: auto */
    overflow: hidden;
}

    .withdraw-drop-card .withdraw-drop-card-body {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

        .withdraw-drop-card .withdraw-drop-card-body .withdraw-drop-card-desc {
            color: var(--base-700);
            line-height: 1.45;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .withdraw-drop-card .announcements-cta {
        flex-shrink: 0;
        margin-top: auto;
    }

    .withdraw-drop-card .withdraw-drop-card-cta.btn-with-icon {
        gap: 8px;
    }

/* Document & Forms: documents card (replaces announcements) — height matches header row */
.doc-forms-documents-card {
    overflow: hidden;
}

    .doc-forms-documents-card .doc-forms-documents-card-body {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 4px;
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
    }

.doc-forms-documents-card-entry {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.doc-forms-documents-card-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Match .sidebar-link.active surface */
    background-color: var(--base-75);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
}

.doc-forms-documents-card-icon {
    width: 20px;
    height: 20px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.doc-forms-documents-card-text {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Title + meta share the same fade mask as .announcement-card .announcements-list */
.doc-forms-documents-card-title-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

    .doc-forms-documents-card-title-wrap::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 28px;
        background: linear-gradient(to bottom, transparent, var(--base-50));
        pointer-events: none;
    }

.doc-forms-documents-card-title {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
    line-height: 1.35;
}

.doc-forms-documents-card-meta {
    color: var(--base-700);
    line-height: 1.45;
}

.doc-forms-documents-card .doc-forms-documents-card-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 12px;
    width: 100%;
    box-sizing: border-box;
}

    .doc-forms-documents-card .doc-forms-documents-card-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }

/* Each action: visible neutral border (avoid .btn-ghost — it strips borders) */
.doc-forms-documents-card .doc-forms-documents-card-action-btn.btn-outline {
    border: 1px solid var(--base-200);
    border-color: var(--base-200);
    color: var(--base-900);
    background-color: var(--base-50);
}

    .doc-forms-documents-card
    .doc-forms-documents-card-action-btn.btn-outline:hover,
    .doc-forms-documents-card
    .doc-forms-documents-card-action-btn.btn-outline:focus-visible {
        background-color: var(--base-75);
        border-color: var(--base-200);
        color: var(--base-900);
    }

.doc-forms-documents-card .doc-forms-upload-btn.btn-with-icon {
    gap: 8px;
}

/* Document & Forms: required / other form cards (single block + horizontal strip) */
.doc-forms-page-section {
    margin-top: 28px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.doc-forms-form-block {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    box-sizing: border-box;
}

.doc-forms-form-block-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.doc-forms-form-block-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
}

.doc-forms-form-block-title {
    margin-bottom: 6px;
}

/* Match Course Details intro: .course-details-education-panel .component-library-desc */
.doc-forms-form-block .doc-forms-page-section-lead {
    margin: 0;
    color: var(--base-700);
    line-height: 1.5;
    /*max-width: 64rem;*/
    flex-basis: 100%;
}

.doc-forms-form-strip-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.doc-forms-form-strip-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--base-200);
    border-radius: 8px;
    background-color: var(--base-50);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

    .doc-forms-form-strip-chevron:hover,
    .doc-forms-form-strip-chevron:focus-visible {
        background-color: var(--base-75);
        border-color: var(--base-200);
        outline: none;
    }

.doc-forms-form-strip-chevron-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.doc-forms-form-strip-fade {
    position: relative;
    margin-top: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Fade is applied with mask on the scroll viewport so it sits flush with the strip edge
   (overlays looked like a wide soft band and did not track the container edge). */
.doc-forms-form-strip {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Minimal scrollbar — same tokens as .simple-modal-body--custom-scroll (horizontal axis) */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--base-900) 22%, var(--base-200)) transparent;
    outline: none;
    -webkit-mask-image: none;
    mask-image: none;
    /*-webkit-mask-size: 100% 100%;*/
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    box-sizing: border-box;
}

    .doc-forms-form-strip::-webkit-scrollbar {
        height: 5px;
    }

    .doc-forms-form-strip::-webkit-scrollbar-track {
        background: transparent;
    }

    .doc-forms-form-strip::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--base-900) 16%, var(--base-200));
        border-radius: 100px;
    }

        .doc-forms-form-strip::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--base-900) 28%, var(--base-200));
        }

/* More content to the right (at scroll start): narrow fade at viewport right */
.doc-forms-form-strip-fade.doc-forms-form-strip-fade--overflowing:not( .doc-forms-form-strip-fade--overflowing-left )
.doc-forms-form-strip {
    -webkit-mask-image: linear-gradient( to right, #000 0%, #000 calc(100% - 4px), transparent 100% );
    mask-image: linear-gradient( to right, #000 0%, #000 calc(100% - 4px), transparent 100% );
}

/* More content to the left (at scroll end): narrow fade at viewport left */
.doc-forms-form-strip-fade.doc-forms-form-strip-fade--overflowing-left:not( .doc-forms-form-strip-fade--overflowing )
.doc-forms-form-strip {
    -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 4px, #000 100% );
    mask-image: linear-gradient(to right, transparent 0%, #000 4px, #000 100%);
}

/* Middle of scroll: fades on both viewport edges */
.doc-forms-form-strip-fade.doc-forms-form-strip-fade--overflowing.doc-forms-form-strip-fade--overflowing-left
.doc-forms-form-strip {
    -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 4px, #000 calc(100% - 4px), transparent 100% );
    mask-image: linear-gradient( to right, transparent 0%, #000 4px, #000 calc(100% - 4px), transparent 100% );
}

.doc-forms-form-strip:focus-visible {
    box-shadow: 0 0 0 2px var(--base-50), 0 0 0 4px var(--primary);
    border-radius: 8px;
}

.doc-forms-form-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    max-width: none;
    min-width: min-content;
    padding-bottom: 4px;
    box-sizing: border-box;
}

.doc-forms-form-card {
    flex: 0 0 auto;
    width: min(380px, 92vw);
    max-width: 440px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 22px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 10px;
    box-sizing: border-box;
}

    /* Top accent matches status badge (same idea as status colors in variables.css) */
    .doc-forms-form-card:has(.doc-forms-form-status--required) {
        border-top: 3px solid var(--warning);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--urgent) {
        border-top: 3px solid var(--danger);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--optional) {
        /* Same as .doc-forms-form-status--optional background */
        border-top: 3px solid var(--base-100);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--completed) {
        border-top: 3px solid var(--success);
    }

    .doc-forms-form-card .form-details {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Title + status on one line (same pattern as .status-badge next to label) */
    .doc-forms-form-card .form-details-title-row {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
    }

    .doc-forms-form-card .form-details-name {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        font-size: var(--text-body-size);
        font-weight: var(--text-body-weight-semibold);
        color: var(--base-900);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .doc-forms-form-card .form-details-name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .doc-forms-form-card .doc-forms-form-name-icon-wrap {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background-color: var(--base-100);
    }

    .doc-forms-form-card .doc-forms-form-name-icon {
        width: 18px;
        height: 18px;
        display: block;
        filter: invert(31%) sepia(6%) saturate(315%) hue-rotate(181deg) brightness(92%) contrast(90%);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--required)
    .doc-forms-form-name-icon-wrap {
        background-color: var(--warning-light);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--required)
    .doc-forms-form-name-icon {
        filter: invert(73%) sepia(90%) saturate(1260%) hue-rotate(355deg) brightness(103%) contrast(102%);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--urgent)
    .doc-forms-form-name-icon-wrap {
        background-color: var(--danger-light);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--urgent)
    .doc-forms-form-name-icon {
        filter: invert(25%) sepia(88%) saturate(3430%) hue-rotate(329deg) brightness(96%) contrast(100%);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--optional)
    .doc-forms-form-name-icon-wrap {
        background-color: var(--base-100);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--optional)
    .doc-forms-form-name-icon {
        filter: invert(31%) sepia(6%) saturate(315%) hue-rotate(181deg) brightness(92%) contrast(90%);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--completed)
    .doc-forms-form-name-icon-wrap {
        background-color: var(--success-light);
    }

    .doc-forms-form-card:has(.doc-forms-form-status--completed)
    .doc-forms-form-name-icon {
        filter: invert(49%) sepia(82%) saturate(854%) hue-rotate(102deg) brightness(89%) contrast(101%);
    }

/* Same pill + type scale as .status-badge; colors from variables.css */
.doc-forms-form-status {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    line-height: 1.25;
    border-radius: 24px;
    width: fit-content;
    border: none;
}

.doc-forms-form-status--required {
    background-color: var(--warning-light);
    color: var(--warning);
}

.doc-forms-form-status--urgent {
    background-color: var(--danger-light);
    color: var(--danger);
}

.doc-forms-form-status--optional {
    background-color: var(--base-100);
    color: var(--base-700);
}

.doc-forms-form-status--completed {
    background-color: var(--success-light);
    color: var(--success);
}

.doc-forms-form-card-desc {
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.doc-forms-form-card-desc-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.doc-forms-form-see-more {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .doc-forms-form-see-more:hover {
        color: var(--primary-light);
    }

    .doc-forms-form-see-more:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

.simple-modal#modal-form-details .simple-modal-card {
    max-width: 560px;
}

.simple-modal#modal-form-details .simple-modal-header--form-details {
    align-items: center;
    margin-bottom: 12px;
}

.simple-modal#modal-form-details .simple-modal-header-form-details {
    flex: 1 1 auto;
    min-width: 0;
}

/* Same line as card: title truncates, badge sits immediately after (inline-flex + nowrap) */
.simple-modal#modal-form-details .modal-form-details-title-row {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

    .simple-modal#modal-form-details
    .modal-form-details-title-row
    .simple-modal-title {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
    }

    .simple-modal#modal-form-details
    .modal-form-details-title-row
    .doc-forms-form-status {
        flex-shrink: 0;
    }

.simple-modal#modal-form-details .modal-form-details-body {
    padding-top: 4px;
}

.modal-form-details-body-text {
    margin: 0;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-regular);
    color: var(--base-700);
    line-height: 1.65;
    letter-spacing: 0.01em;
    max-width: 62ch;
}

.simple-modal#modal-form-details .simple-modal-body {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

    .simple-modal#modal-form-details
    .simple-modal-body.simple-modal-body--custom-scroll {
        padding-left: 6px;
        padding-right: 6px;
    }

/* Doc Forms: submit form modal (fields match .login-field / .login-input from auth forms) */
.simple-modal#modal-submit-form .simple-modal-card {
    max-width: 480px;
}

.simple-modal#modal-submit-form .simple-modal-body--submit-form {
    max-height: min(65vh, 520px);
    overflow-y: auto;
    overflow-x: visible;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

.simple-modal#modal-submit-form #modal-submit-form-form,
.simple-modal#modal-submit-form .modal-submit-form-fields {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.simple-modal#modal-submit-form .modal-submit-form-fields {
    gap: 16px;
    align-items: stretch;
}

.simple-modal#modal-submit-form .modal-submit-form-footer {
    margin-top: 20px;
    padding-top: 4px;
}

.simple-modal#modal-submit-form .login-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    align-self: stretch;
}

.simple-modal#modal-submit-form .login-input-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
}

.simple-modal#modal-submit-form .login-input--no-icon {
    padding-right: 12px;
}

.simple-modal#modal-submit-form .login-input-wrap .login-input,
.simple-modal#modal-submit-form .login-input-wrap textarea.login-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.simple-modal#modal-submit-form .login-input--textarea {
    min-height: 96px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

/* Semester-style dropdown (full width) — same pattern as .header-semester-dropdown */
.simple-modal#modal-submit-form
.modal-submit-form-dropdown.header-semester-dropdown {
    display: block;
    width: 100%;
    max-width: 100%;
}

.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-trigger.header-card-semester-dropdown {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    text-align: left;
}

/* Subtle neutral border — same as .dashboard-header-semester semester control */
.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-trigger.header-card-semester-dropdown,
.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-trigger.header-modal-trigger {
    border: 1px solid var(--base-200) !important;
    border-color: var(--base-200) !important;
}

    .simple-modal#modal-submit-form
    .modal-submit-form-dropdown
    .modal-submit-form-dropdown-trigger.header-card-semester-dropdown:hover,
    .simple-modal#modal-submit-form
    .modal-submit-form-dropdown
    .modal-submit-form-dropdown-trigger.header-modal-trigger:hover,
    .simple-modal#modal-submit-form
    .modal-submit-form-dropdown
    .modal-submit-form-dropdown-trigger.header-card-semester-dropdown:focus-visible,
    .simple-modal#modal-submit-form
    .modal-submit-form-dropdown
    .modal-submit-form-dropdown-trigger.header-modal-trigger:focus-visible {
        border-color: color-mix( in srgb, var(--base-900) 10%, var(--base-200) ) !important;
        background-color: var(--base-50) !important;
        color: var(--base-900) !important;
    }

.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-trigger:hover
.benefits-details-icon,
.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-trigger:focus-visible
.benefits-details-icon {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.benefits-details-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.simple-modal#modal-submit-form
.modal-submit-form-dropdown
.modal-submit-form-dropdown-value {
    display: block;
    width: 100%;
    text-align: left;
}

.simple-modal#modal-submit-form .modal-submit-form-dropdown .dropdown-content {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
    box-sizing: border-box;
    border: 1px solid var(--base-200);
    background-color: var(--base-50);
    padding: 8px 10px;
}

.simple-modal#modal-submit-form .modal-submit-form-dropdown-item.dropdown-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.doc-forms-form-card .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 0;
    margin-top: auto;
}

    /* Match Documents card View / Upload: .btn-outline uses min-height 44px site-wide */
    .doc-forms-form-card .form-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        box-sizing: border-box;
    }

    .doc-forms-form-card .form-actions .btn-outline {
        min-height: 44px;
        height: 44px;
    }

    /* Submit primary: no brightness hover on form cards */
    .doc-forms-form-card .form-actions .btn-primary:hover,
    .doc-forms-form-card .form-actions .btn-primary:active {
        filter: none;
        background: var(--primary);
        color: var(--base-50);
    }

    /* Label + icon grouped, centered in the button */
    .doc-forms-form-card .form-actions .btn-with-icon {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

        .doc-forms-form-card .form-actions .btn-with-icon .btn-icon {
            flex-shrink: 0;
        }

    /* Submitted / completed card: neutral button, no primary hover */
    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn,
    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn:disabled,
    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn:hover,
    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn:focus-visible,
    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn:active {
        --bs-btn-disabled-opacity: 1;
        background-color: var(--base-50) !important;
        color: var(--base-900) !important;
        border: 1px solid var(--base-200) !important;
        box-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        cursor: default;
        font-weight: var(--text-body-weight-semibold);
    }

    .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--success);
    }

        .doc-forms-form-card .form-actions .doc-forms-form-submitted-btn-check svg {
            display: block;
            width: 18px;
            height: 18px;
        }

.simple-modal-body--doc-forms-documents {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Hidden radios: CSS-only draft state for documents modal (labels toggle radios) */
.doc-modal-draft-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.doc-forms-modal-pending-upload-panel {
    display: none;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--base-200);
}

.doc-forms-modal-document-item--pending {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.doc-forms-modal-pending-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--base-700);
    align-self: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .doc-forms-modal-pending-dismiss:hover,
    .doc-forms-modal-pending-dismiss:focus-visible {
        background-color: var(--base-75);
        color: var(--base-900);
    }

    .doc-forms-modal-pending-dismiss:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .doc-forms-modal-pending-dismiss img {
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
    }

.doc-forms-modal-bottom-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--base-200);
}

.doc-forms-modal-upload-trigger {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.doc-forms-modal-upload-open-btn {
    width: auto;
    min-height: 44px;
    cursor: pointer;
    justify-content: center;
    box-sizing: border-box;
}

/* Modal Upload: neutral border (design system) — same as documents card actions */
.simple-modal#modal-documents .doc-forms-modal-upload-open-btn.btn-outline {
    border-color: var(--base-200);
    color: var(--base-900);
    background-color: var(--base-50);
}

    .simple-modal#modal-documents
    .doc-forms-modal-upload-open-btn.btn-outline:hover,
    .simple-modal#modal-documents
    .doc-forms-modal-upload-open-btn.btn-outline:focus-visible {
        background-color: var(--base-75);
        border-color: var(--base-200);
        color: var(--base-900);
    }

        .simple-modal#modal-documents
        .doc-forms-modal-upload-open-btn.btn-outline:hover
        .btn-icon-outline,
        .simple-modal#modal-documents
        .doc-forms-modal-upload-open-btn.btn-outline:focus-visible
        .btn-icon-outline {
            filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
        }

.doc-forms-modal-submit-row {
    display: none;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.doc-forms-modal-submit-form {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.doc-forms-modal-submit-btn {
    width: auto;
}

#doc-modal-draft-active:checked ~ .doc-forms-modal-pending-upload-panel {
    display: block;
}

#doc-modal-draft-active:checked ~ .doc-forms-modal-bottom-bar
.doc-forms-modal-upload-trigger {
    display: none;
}

#doc-modal-draft-active:checked ~ .doc-forms-modal-bottom-bar
.doc-forms-modal-submit-row {
    display: flex;
}

.simple-modal#modal-documents .simple-modal-card {
    max-width: min(600px, 96vw);
}

.doc-forms-modal-document-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.doc-forms-modal-document-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--base-200);
}

    .doc-forms-modal-document-item:first-child {
        padding-top: 0;
    }

    .doc-forms-modal-document-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.doc-forms-modal-doc-icon-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--base-75);
    padding: 8px;
    box-sizing: border-box;
}

.doc-forms-modal-doc-icon {
    width: 20px;
    height: 20px;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.doc-forms-modal-document-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-forms-modal-document-name {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
    line-height: 1.35;
}

.doc-forms-modal-document-meta {
    line-height: 1.45;
}

.doc-forms-modal-view-btn {
    flex-shrink: 0;
    align-self: flex-start;
    height: 32px;
    padding: 0 10px;
    font-size: var(--text-body-small-size);
    white-space: nowrap;
}

    .doc-forms-modal-view-btn.btn-with-icon {
        gap: 6px;
    }

/* Documents modal: View row actions — no hover/focus style change */
.simple-modal#modal-documents .doc-forms-modal-view-btn.btn-outline.btn-ghost {
    border: 1px solid var(--base-200) !important;
    background: transparent !important;
    color: var(--base-900) !important;
}

    .simple-modal#modal-documents
    .doc-forms-modal-view-btn.btn-outline.btn-ghost:hover,
    .simple-modal#modal-documents
    .doc-forms-modal-view-btn.btn-outline.btn-ghost:focus-visible {
        border: 1px solid var(--base-200) !important;
        background: transparent !important;
        color: var(--base-900) !important;
    }

.simple-modal#modal-documents .doc-forms-modal-view-btn:hover .btn-icon-outline,
.simple-modal#modal-documents
.doc-forms-modal-view-btn:focus-visible
.btn-icon-outline {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%) !important;
}

@media (max-width: 399.98px) {
    .doc-forms-modal-document-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .doc-forms-modal-view-btn {
        flex: 1 1 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

.benefit-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--base-200);
}

    /* Markup often includes a separator div right after the header; hide it to avoid a double line */
    .benefit-card-header + .benefit-card-separator {
        display: none;
    }

.benefit-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.benefit-card-title {
    color: var(--base-900);
}

.benefit-card-separator {
    height: 1px;
    background-color: var(--base-200);
    margin: 12px 0;
}

.benefits-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.benefits-details-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.benefits-details-label {
    color: var(--base-700);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

.benefits-details-value {
    color: var(--base-900);
    font-size: var(--text-body-size);
}

.benefits-details-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

/* Right column cards stack */
.right-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    /* Same visual order when the column stacks (tablet/mobile) as on desktop (1024px+) */
    .right-cards .benefit-card,
    .right-cards .announcement-card {
        order: 1;
    }

    .right-cards .advisor-card {
        order: 3;
    }

    .right-cards .program-card {
        order: 4;
    }

    .right-cards .todo-card {
        order: 2;
    }

    .right-cards .recent-activities-card {
        order: 5;
    }

    .right-cards .enrollment-overview-card {
        order: 6;
    }

@media (min-width: 992px) {
    .benefits-layout-row {
        flex-wrap: nowrap;
    }

        .benefits-layout-row .benefits-left-col {
            flex: 1 1 0;
            min-width: 0;
            width: auto;
            max-width: none;
        }

        /* Fixed cap: do not use width:auto (content-sized) or each row’s right column can differ */
        .benefits-layout-row .benefits-right-col {
            flex: 0 0 auto;
            width: min(100%, var(--benefits-right-column-max));
            max-width: var(--benefits-right-column-max);
            min-width: 0;
        }

            .benefits-layout-row .benefits-right-col .right-cards {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

    /* Header row only: no announcement card → header uses full row width */
    .header-announcement-row:not(:has(.announcement-card)) .benefits-left-col {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Header + announcement: stack below --header-announcement-split-min (1440px); two columns from that width up (see @media min-width: 992px .benefits-layout-row) */
@media (max-width: 1439.98px) {
    .header-announcement-row.benefits-layout-row {
        flex-wrap: wrap;
    }

    .header-announcement-row .benefits-left-col,
    .header-announcement-row .benefits-right-col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* Collapse empty announcements column when the card is commented out / removed */
.header-announcement-row:not(:has(.announcement-card)) .benefits-right-col {
    display: none !important;
}

/* Advisor / Program cards – same shell */
.advisor-card,
.program-card {
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.advisor-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.advisor-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.advisor-card-title {
    color: var(--base-900);
}

.advisor-card-separator {
    height: 1px;
    background-color: var(--base-200);
    margin: 12px 0;
}

.advisor-details {
    display: flex;
    align-items: center;
    gap: 12px;
}

.advisor-details-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.program-details-illustration {
    object-fit: cover;
    object-position: center;
}

.advisor-details-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.advisor-details-name {
    color: var(--base-900);
    font-size: var(--text-body-size);
}

.advisor-details-role {
    color: var(--base-700);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

/* Right column: advisor / program rows open modal; hover matches dropdown items */
a.advisor-details.advisor-details--modal-trigger {
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 8px;
    margin: 4px -8px 0;
    transition: background-color 0.2s ease;
}

    a.advisor-details.advisor-details--modal-trigger:hover {
        background-color: var(--base-75);
    }

    a.advisor-details.advisor-details--modal-trigger:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

/* Todo card */
.todo-card {
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.todo-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.todo-card-title {
    color: var(--base-900);
}

.todo-card-separator {
    height: 1px;
    background-color: var(--base-200);
    margin: 12px 0;
}

.todo-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px; 
}
.todo-details-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align:left;
}

.todo-details-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.todo-details-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--primary);
    flex-shrink: 0;
}

.todo-details-time {
    color: var(--primary);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

.todo-details-task {
    color: var(--base-900);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
}

.todo-details-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

/* Notification card (component library): reuses todo card styles */
.notification-card {
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    width: 400px;
    max-width: 100%;
}

.notification-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.notification-details .todo-details-text {
    flex: 1;
    min-width: 0;
}

.notification-title {
    color: var(--base-900);
    font-size: var(--text-body-size);
}

/* Timeline card (meetings) */
.timeline-card {
    width: 400px;
    max-width: 100%;
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.meeting-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meeting-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meeting-title-instructor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meeting-block .btn {
    width: fit-content;
}

/* ========== Profile Card ========== */
.profile-card {
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-header-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-header-name {
    font-size: 20px;
    font-weight: 600;
    color: #262526;
}

.profile-header-role {
    font-size: 14px;
    font-weight: 400;
    color: #707072;
}

.profile-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-details-label {
    font-size: 14px;
    font-weight: 600;
    color: #262526;
}

.profile-details-intro {
    font-size: 14px;
    font-weight: 400;
    color: #707072;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-skill-badge {
    padding: 4px 10px;
    border-radius: 12px;
    background-color: #d9e3fd;
    color: #1151f3;
    font-size: 12px;
    font-weight: 400;
}

.profile-card-separator {
    height: 1px;
    background-color: var(--base-200);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .profile-actions .btn {
        flex: 1;
        min-width: 0;
    }

/* ========== Subject Overview Card ========== */
.subject-overview-card {
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.subject-overview-cover {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subject-overview-cover-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
}

.subject-overview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.subject-overview-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.subject-overview-stat-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(200%) hue-rotate(0deg);
}

.subject-overview-stat-text {
    font-size: 14px;
    font-weight: 400;
    color: #707072;
}

.subject-overview-title {
    font-size: 14px;
    font-weight: 600;
    color: #262526;
}

.subject-overview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subject-overview-instructor {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subject-overview-instructor-avatar {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.subject-overview-instructor-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.subject-overview-instructor-name {
    font-size: 16px;
    font-weight: 600;
    color: #262526;
}

.subject-overview-instructor-role {
    font-size: 14px;
    font-weight: 400;
    color: #707072;
}

.subject-overview-card .profile-card-separator {
    margin: 0;
}

.subject-overview-btn {
    width: 100%;
}

.meeting-status {
    border-radius: 4px;
    background-color: #d9e3fd;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1151f3;
    width: 100%;
    box-sizing: border-box;
}

.meeting-title {
    font-size: 16px;
    font-weight: 600;
    color: #262526;
}

.meeting-instructor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meeting-instructor-avatar {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.meeting-instructor-text {
    font-size: 14px;
    font-weight: 400;
    color: #376df5;
}

.todo-card-view-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

    .todo-card-view-all-wrap .btn {
        width: 100%;
    }

/* Recent Activities card */
.recent-activities-card {
    margin-top: 16px;
    padding: 20px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
}

.recent-activities-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recent-activities-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.recent-activities-card-title {
    color: var(--base-900);
}

.recent-activities-card-separator {
    height: 1px;
    background-color: var(--base-200);
    margin: 12px 0;
}

.activities-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.activities-details-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activities-details-time {
    color: var(--base-700);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

.activities-details-title {
    color: var(--base-900);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
}

.activities-details-desc {
    color: var(--base-700);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
}

.activities-details-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.recent-activities-card-view-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

    .recent-activities-card-view-all-wrap .btn {
        width: 100%;
    }

/* ========== Sidebar ========== */
.sidebar {
    width: 280px;
    min-width: 280px;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 12px;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-inner {
    padding: 24px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Profile block */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.sidebar-profile-img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-profile-info {
    min-width: 0;
}

.sidebar-profile-name {
    color: var(--base-900);
}

.sidebar-profile-year {
    color: var(--base-700);
    /* Slightly larger than xsmall (12px), still below body-small (16px) */
    font-size: calc(var(--text-body-xsmall-size) + 2px);
    font-weight: var(--text-body-xsmall-weight);
    line-height: 1.35;
}

/* Platform title */
.sidebar-platform-title {
    color: var(--base-900);
    margin-bottom: 12px;
}

/* Nav links */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--base-600);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .sidebar-link,
    .sidebar-link .text-body {
        color: var(--base-600);
    }

/* Inactive link labels: Course History, Document & Forms, Communication, etc. + Logout */
.sidebar-nav .sidebar-link:not(.active),
.sidebar-nav .sidebar-link:not(.active) .text-body,
.sidebar-nav .sidebar-link:not(.active) span,
.sidebar-logout,
.sidebar-logout .text-body,
.sidebar-logout span {
    color: var(--base-600) !important;
}

.sidebar-link .lucide-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    /* Lucide SVGs are dark; filter to base-600 gray */
    filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: inactive links — primary text + icon, no background */
.sidebar-link:hover:not(.active),
.sidebar-link:hover:not(.active) .text-body,
.sidebar-link:hover:not(.active) span,
.sidebar-nav .sidebar-link:hover:not(.active),
.sidebar-nav .sidebar-link:hover:not(.active) .text-body,
.sidebar-nav .sidebar-link:hover:not(.active) span {
    color: var(--primary) !important;
}

    .sidebar-link:hover:not(.active) .lucide-icon {
        filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
        opacity: 1;
    }

/* Active: same surface as .btn-ghost:hover (View All Announcements); primary label + icon */
.sidebar-link.active,
.sidebar-link.active .text-body,
.sidebar-link.active span {
    color: var(--primary) !important;
    font-weight: var(--text-body-weight-semibold);
}

.sidebar-link.active {
    background-color: var(--base-75);
}

    .sidebar-link.active .lucide-icon {
        filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
        opacity: 1;
    }

    .sidebar-link.active:hover,
    .sidebar-link.active:hover .text-body,
    .sidebar-link.active:hover span {
        color: var(--primary) !important;
    }

    .sidebar-link.active:hover {
        background-color: var(--base-75);
    }

        .sidebar-link.active:hover .lucide-icon {
            filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
        }

/* Logout at bottom */
.sidebar-logout {
    margin-top: auto;
    padding-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-link,
    .sidebar-link .lucide-icon {
        transition-duration: 0.01ms !important;
    }
}

/* ========== Responsive: top bar + drawer (mobile only) ========== */
/* Top bar: hidden on desktop & tablet rail, shown only on small screens */
.topbar {
    display: none;
}

/* Mobile: below 768px — topbar + hamburger drawer; desktop sidebar hidden */
@media (max-width: 767.98px) {
    /* Top bar: profile (left) + panel-left trigger (right) at very top */
    .topbar {
        display: flex;
        align-items: center;
        padding: 16px 24px;
        background-color: var(--base-50);
        border-bottom: 1px solid var(--base-200);
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .topbar .sidebar-profile {
        margin-bottom: 0;
    }

    .topbar-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        color: var(--base-900);
        text-decoration: none;
    }

    .topbar-trigger-icon {
        width: 24px;
        height: 24px;
    }

    /* Stack layout: topbar on top, main below */
    body {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
    }

    /* Hide desktop sidebar on mobile */
    .sidebar--desktop {
        display: none !important;
    }

    /* Drawer wrapper: shown when #sidebar-drawer is targeted (no JS) */
    .sidebar-drawer-wrapper {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        pointer-events: none;
        visibility: hidden;
    }

        .sidebar-drawer-wrapper:target {
            pointer-events: auto;
            visibility: visible;
        }

    .sidebar-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(38, 37, 38, 0.5);
        cursor: pointer;
        pointer-events: auto;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .sidebar-drawer-wrapper:target .sidebar-overlay {
        opacity: 1;
    }

    .sidebar--drawer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        min-width: 280px;
        background-color: var(--base-50);
        border-left: 1px solid var(--base-200);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        pointer-events: auto;
        overflow-y: auto;
    }

    .sidebar-drawer-wrapper:target .sidebar--drawer {
        transform: translateX(0);
    }

    /* Drawer header: Platform (left) + X (right) */
    .sidebar-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

        .sidebar-drawer-header .sidebar-platform-title {
            color: var(--base-900);
            margin-bottom: 0;
        }

    .sidebar-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        color: var(--base-900);
        text-decoration: none;
    }

        .sidebar-drawer-close:hover {
            color: var(--primary);
        }

    .sidebar-drawer-close-icon {
        width: 24px;
        height: 24px;
    }
}

/* Tablet: 768px–1023px — left rail: profile avatar only + icon-only links */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .topbar {
        display: none !important;
    }

    .sidebar-drawer-wrapper {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body {
        flex-direction: row;
    }

    .sidebar.sidebar--desktop {
        display: flex !important;
        flex-direction: column;
        width: 76px;
        min-width: 76px;
        margin: 12px 0 12px 12px;
    }

        .sidebar.sidebar--desktop .sidebar-inner {
            padding: 12px 8px;
            align-items: center;
        }

        .sidebar.sidebar--desktop .sidebar-profile {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            margin-bottom: 16px;
            width: 100%;
        }

        .sidebar.sidebar--desktop .sidebar-profile-info {
            display: none;
        }

        .sidebar.sidebar--desktop .sidebar-profile-img {
            width: 55px;
            height: 55px;
        }

        .sidebar.sidebar--desktop .sidebar-nav {
            width: 100%;
            align-items: center;
        }

            .sidebar.sidebar--desktop .sidebar-nav .sidebar-link,
            .sidebar.sidebar--desktop .sidebar-logout {
                justify-content: center;
                padding: 10px 8px;
                width: 100%;
                box-sizing: border-box;
            }

                /* Keep labels for screen readers only */
                .sidebar.sidebar--desktop .sidebar-nav .sidebar-link span,
                .sidebar.sidebar--desktop .sidebar-logout span {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }

            .sidebar.sidebar--desktop .sidebar-nav .sidebar-link,
            .sidebar.sidebar--desktop .sidebar-logout {
                position: relative;
            }

    .main-content {
        width: 100%;
    }

    /* Tablet toolbar: match mobile stacking (search, dropdown, note) */
    .dashboard-toolbar-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

        .dashboard-toolbar-actions .dashboard-header-toolbar,
        .dashboard-toolbar-actions .dashboard-header-toolbar--semester,
        .dashboard-toolbar-actions .dashboard-header-toolbar--semester-with-alert {
            width: 100%;
            max-width: 100%;
            flex: 1 1 auto;
        }

    .dashboard-header-search-wrap {
        width: 100%;
    }

    .dashboard-header-toolbar--semester-with-alert {
        flex-direction: column;
        gap: 6px;
    }

        .dashboard-header-toolbar--semester-with-alert .dashboard-header-semester {
            flex: 1 1 auto;
            max-width: 100%;
        }
}

/* Desktop: 1024px and above */
@media (min-width: 1024px) {
    .topbar {
        display: none !important;
    }

    .sidebar-drawer-wrapper {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Gutter around desktop sidebar matches page canvas */
    .sidebar.sidebar--desktop {
        box-shadow: 0 0 0 12px var(--page-bg);
    }

    /* Right column width cap on large screens (order: see global .right-cards rules) */
    .right-cards {
        width: 100%;
        max-width: var(--benefits-right-column-max);
    }

    .course-subjects-search-wrap {
        width: 250px;
        min-width: 250px;
    }

    /* Keep breadcrumbs + search + semester on one row when sidebar width changes */
    .dashboard-toolbar-card {
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
    }

    .dashboard-toolbar-breadcrumbs {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    .dashboard-toolbar-actions {
        flex: 0 0 auto;
        flex-shrink: 0;
        margin-left: auto;
    }

        .dashboard-toolbar-actions .dashboard-header-toolbar {
            flex: 0 1 auto;
            min-width: 0;
            max-width: 360px;
        }

            .dashboard-toolbar-actions .dashboard-header-toolbar .dashboard-header-search-wrap {
                width: 100%;
                max-width: 360px;
                min-width: 180px;
            }

        .dashboard-toolbar-actions .dashboard-header-toolbar--semester-with-alert {
            flex: 0 1 auto;
            width: auto;
            max-width: min(720px, 48vw);
            min-width: 0;
        }
}

/* Sidebar: icon rail below 1800px (no toggle). From 1800px up: full sidebar + panel toggle to collapse to icons (checkbox + :has, no JS) */
.sidebar-desktop-expand-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dashboard-toolbar-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-right: 4px;
    border-radius: 8px;
    border: 1px solid var(--base-200);
    background-color: var(--base-50);
    cursor: pointer;
    color: var(--base-700);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

    .dashboard-toolbar-sidebar-toggle:hover {
        border-color: color-mix(in srgb, var(--primary) 45%, var(--base-200));
        color: var(--primary);
        background-color: var(--base-75);
    }

.dashboard-toolbar-sidebar-toggle-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.dashboard-toolbar-sidebar-toggle:hover .dashboard-toolbar-sidebar-toggle-icon {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.sidebar-desktop-expand-toggle:focus-visible + .dashboard-toolbar-sidebar-toggle {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dashboard-toolbar-sidebar-toggle-row {
    display: none;
    position: relative;
}

@media (min-width: 1024px) and (max-width: 1799.98px) {
    /* No toolbar toggle; sidebar stays icon rail */
    .sidebar.sidebar--desktop {
        width: 76px;
        min-width: 76px;
        margin: 12px 0 12px 12px;
    }

        .sidebar.sidebar--desktop .sidebar-inner {
            padding: 12px 8px;
            align-items: center;
        }

        .sidebar.sidebar--desktop .sidebar-profile {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            margin-bottom: 16px;
            width: 100%;
        }

        .sidebar.sidebar--desktop .sidebar-profile-info {
            display: none;
        }

        .sidebar.sidebar--desktop .sidebar-profile-img {
            width: 44px;
            height: 44px;
        }

        .sidebar.sidebar--desktop .sidebar-nav {
            width: 100%;
            align-items: center;
        }

            .sidebar.sidebar--desktop .sidebar-nav .sidebar-link,
            .sidebar.sidebar--desktop .sidebar-logout {
                justify-content: center;
                padding: 10px 8px;
                width: 100%;
                box-sizing: border-box;
            }

                .sidebar.sidebar--desktop .sidebar-nav .sidebar-link span,
                .sidebar.sidebar--desktop .sidebar-logout span {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }

            .sidebar.sidebar--desktop .sidebar-nav .sidebar-link,
            .sidebar.sidebar--desktop .sidebar-logout {
                position: relative;
            }
}

@media (min-width: 1800px) {
    .dashboard-toolbar-sidebar-toggle {
        display: inline-flex;
    }

    .dashboard-toolbar-sidebar-toggle-row {
        display: flex;
        align-items: center;
    }

    body:has(#sidebar-desktop-expand-toggle:checked)
    .dashboard-toolbar-sidebar-toggle-icon {
        transform: scaleX(-1);
    }

    /* Collapsed to icon rail when toggle is checked */
    body:has(#sidebar-desktop-expand-toggle:checked) .sidebar.sidebar--desktop {
        width: 76px;
        min-width: 76px;
        margin: 12px 0 12px 12px;
    }

        body:has(#sidebar-desktop-expand-toggle:checked)
        .sidebar.sidebar--desktop
        .sidebar-inner {
            padding: 12px 8px;
            align-items: center;
        }

        body:has(#sidebar-desktop-expand-toggle:checked)
        .sidebar.sidebar--desktop
        .sidebar-profile {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            margin-bottom: 16px;
            width: 100%;
        }

        body:has(#sidebar-desktop-expand-toggle:checked)
        .sidebar.sidebar--desktop
        .sidebar-profile-info {
            display: none;
        }

        body:has(#sidebar-desktop-expand-toggle:checked)
        .sidebar.sidebar--desktop
        .sidebar-profile-img {
            width: 44px;
            height: 44px;
        }

        body:has(#sidebar-desktop-expand-toggle:checked)
        .sidebar.sidebar--desktop
        .sidebar-nav {
            width: 100%;
            align-items: center;
        }

            body:has(#sidebar-desktop-expand-toggle:checked)
            .sidebar.sidebar--desktop
            .sidebar-nav
            .sidebar-link,
            body:has(#sidebar-desktop-expand-toggle:checked)
            .sidebar.sidebar--desktop
            .sidebar-logout {
                justify-content: center;
                padding: 10px 8px;
                width: 100%;
                box-sizing: border-box;
            }

                body:has(#sidebar-desktop-expand-toggle:checked)
                .sidebar.sidebar--desktop
                .sidebar-nav
                .sidebar-link
                span,
                body:has(#sidebar-desktop-expand-toggle:checked)
                .sidebar.sidebar--desktop
                .sidebar-logout
                span {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }

            body:has(#sidebar-desktop-expand-toggle:checked)
            .sidebar.sidebar--desktop
            .sidebar-nav
            .sidebar-link,
            body:has(#sidebar-desktop-expand-toggle:checked)
            .sidebar.sidebar--desktop
            .sidebar-logout {
                position: relative;
            }
}

/* ========== Mobile only: 768px and below ========== */
@media (max-width: 767.98px) {
    .main-content {
        padding: 16px !important;
    }

    .course-subjects-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Keep toolbar visible on mobile; stack search + semester controls */
    .dashboard-header-toolbar-row {
        display: block !important;
    }

    .dashboard-toolbar-breadcrumbs {
        display: none;
    }

    .dashboard-toolbar-card {
        gap: 12px;
        padding: 12px;
    }

    .dashboard-toolbar-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

        .dashboard-toolbar-actions .dashboard-header-toolbar,
        .dashboard-toolbar-actions .dashboard-header-toolbar--semester,
        .dashboard-toolbar-actions .dashboard-header-toolbar--semester-with-alert {
            width: 100%;
            max-width: 100%;
            flex: 1 1 auto;
        }

    .dashboard-header-search-wrap {
        width: 100%;
    }

    .dashboard-header-toolbar--semester-with-alert {
        flex-direction: column;
        gap: 6px;
    }

        .dashboard-header-toolbar--semester-with-alert .dashboard-header-semester {
            flex: 1 1 auto;
            max-width: 100%;
        }

    .header-announcement-row .benefits-right-col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Same header card as desktop; hide illustration column only */
    .header-card-right {
        display: none !important;
    }

    .header-card {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        align-items: flex-start;
        min-width: 0;
    }

    .header-card-left {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
        overflow: visible;
    }

    /* Course subjects table: swipeable on mobile (no compression) */
    .course-subjects-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .course-subjects-table {
        min-width: 560px;
        width: 100%;
    }
}

/* ========== Component library ========== */
.component-library-separator {
    height: 0;
    border-bottom: 1px solid var(--base-200);
    margin: 0;
}

.component-library {
    background: var(--base-40);
    padding: 32px 24px 48px;
    text-align: left;
}

.component-library-inner {
    max-width: 1200px;
    margin: 0;
}

.component-library-title {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    color: var(--base-900);
    margin: 0 0 8px;
}

.component-library-desc {
    color: var(--base-700);
    margin: 0 0 24px;
}

    .component-library-desc code {
        font-size: 0.9em;
        padding: 2px 6px;
        background: var(--base-200);
        border-radius: 4px;
    }

.component-library-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow: visible;
}

/* Dashboard cards */
.dashboard-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-card {
    width: 240px;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background-color: var(--primary);
    border-radius: 12px;
    box-sizing: border-box;
}

.dashboard-card-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
}

.dashboard-card-icon {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.dashboard-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-card-number {
    font-size: 24px;
    font-weight: 600;
    color: var(--base-50);
    line-height: 1.2;
}

.dashboard-card-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--base-50);
    line-height: 1.2;
}

/* Dashboard card light variant: white bg, dark text */
.dashboard-card--light {
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
}

    .dashboard-card--light .dashboard-card-icon-wrap {
        background-color: var(--primary-light);
    }

    /* Light variant: white icon on brand-tint circle (matches primary stat cards) */
    .dashboard-card--light .dashboard-card-icon {
        filter: brightness(0) invert(1);
    }

    .dashboard-card--light .dashboard-card-number {
        color: #262526;
    }

    .dashboard-card--light .dashboard-card-label {
        color: #707072;
    }

.component-library-divider {
    height: 1px;
    background-color: var(--base-200);
    margin: 32px calc(50% - 50vw);
    border: none;
    width: 100vw;
    box-sizing: content-box;
}

.component-library-auth-cards {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Buttons – base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-regular);
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--base-50);
}

    .btn-primary:hover {
        filter: brightness(1.08);
    }

.btn-outline {
    background: none;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: var(--text-body-weight-semibold);
    min-height: 44px;
}

    .btn-outline:hover {
        background: none;
        border-color: var(--primary);
        color: var(--primary);
    }

        .btn-outline:hover .btn-icon-outline {
            filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
        }

/* Subject card “View Details”: default border uses design-system neutral */
.subject-card-actions .btn-outline {
    border-color: var(--base-200);
}

    /* Subject card CTA hover: same subtle surface as View All Announcements (.btn-ghost:hover) */
    .subject-card-actions .btn-outline:hover,
    .subject-card-actions .btn-outline:focus-visible {
        background-color: var(--base-75);
        border-color: var(--base-200);
        color: var(--base-900);
    }

/* Course History table — “Show progress details”: white surface + neutral border, hover matches View Details */
.course-subjects-table .course-subjects-action-btn.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 8px;
    color: var(--base-900);
    text-decoration: none;
    box-sizing: border-box;
}

    .course-subjects-table .course-subjects-action-btn.btn-outline:hover,
    .course-subjects-table .course-subjects-action-btn.btn-outline:focus-visible {
        background-color: var(--base-75);
        border-color: var(--base-200);
        color: var(--base-900);
    }

.course-subjects-table .course-subjects-action-btn.btn-with-icon {
    gap: 6px;
}

/* Course History: tabs sit closer to the table */
.course-details-education-panel .benefit-tab-grid {
    padding-top: 0px;
}

    .course-details-education-panel .benefit-tab-grid.benefit-tab-grid--empty {
        min-height: 0;
        display: block;
        align-items: stretch;
        justify-content: flex-start;
    }

.simple-modal#modal-course-progress .simple-modal-card {
    max-width: min(880px, 96vw);
}

.simple-modal-body--course-progress {
    margin: 0 -18px -18px;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

.course-progress-modal-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Filled hover for advisor modal action outline buttons */
.simple-modal#modal-advisor .simple-modal-action-btn.btn-outline:hover,
.simple-modal#modal-advisor .simple-modal-action-btn.btn-outline:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--base-50);
}

    .simple-modal#modal-advisor
    .simple-modal-action-btn.btn-outline:hover
    .btn-icon-outline,
    .simple-modal#modal-advisor
    .simple-modal-action-btn.btn-outline:focus-visible
    .btn-icon-outline {
        filter: brightness(0) invert(1);
    }

.btn-danger {
    background: var(--danger);
    color: var(--base-50);
    border-color: var(--danger);
}

    .btn-danger:hover {
        filter: brightness(1.08);
    }

.btn-warning {
    background: var(--warning);
    color: var(--base-50);
    border-color: var(--warning);
}

    .btn-warning:hover {
        filter: brightness(1.08);
    }

.btn-success {
    background: var(--success);
    color: var(--base-50);
    border-color: var(--success);
}

    .btn-success:hover {
        filter: brightness(1.08);
    }

.btn-with-icon .btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary .btn-icon {
    filter: brightness(0) invert(1);
}

.btn-outline .btn-icon-outline,
.btn-icon-dropdown {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

/* Dropdown trigger: icon on right */
.btn-dropdown-trigger {
    flex-direction: row;
}

    .btn-dropdown-trigger .btn-icon-dropdown {
        order: 1;
        margin-left: 4px;
        transition: transform 0.2s ease;
    }

/* Semester toolbar dropdown chevron: slightly larger for readability */
.header-semester-dropdown .btn-dropdown-trigger .benefits-details-icon {
    width: 22px;
    height: 22px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* Hide checkbox visually but keep it checkable so label click works */
.dropdown-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dropdown-content {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 130px;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    padding: 12px 16px;
    border-radius: 6px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.dropdown-toggle:checked ~ .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-toggle:checked + .btn-dropdown-trigger .btn-icon-dropdown {
    transform: rotate(180deg);
}

.dropdown-item {
    display: block;
    padding: 6px 8px;
    font-size: var(--text-body-small-size);
    color: var(--base-900);
    text-decoration: none;
    border-radius: 6px;
}

    .dropdown-item:hover {
        background-color: var(--base-75);
    }

/* ========== Login Form Component ========== */
.login-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--base-200);
    background-color: var(--base-50);
    width: 100%;
    max-width: 400px;
}

/* Login Header */
.login-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
}

.login-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 100%;
}

.login-title {
    font-size: var(--text-subtitle-size);
    font-weight: var(--text-subtitle-weight);
    color: var(--base-900);
    margin: 0;
}

.login-subtitle {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
    margin: 0;
}

/* Login Form Content */
.login-form-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-field-label {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-700);
    margin: 0;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input {
    width: 100%;
    height: 36px;
    padding: 8px;
    padding-right: 36px;
    border: none;
    background-color: var(--base-75);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-900);
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

    .login-input:focus {
        box-shadow: 0 0 0 3px var(--primary-light);
    }

    .login-input::placeholder {
        color: var(--base-600);
        font-size: var(--text-body-small-size);
        font-weight: var(--text-body-small-weight);
    }

.login-input-icon {
    position: absolute;
    right: 10px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
    pointer-events: none;
}

/* Login Form Footer */
.login-form-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Divider with "or" */
.login-divider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--base-200);
}

.login-divider-text {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-600);
    flex-shrink: 0;
}

/* Signup text */
.login-signup-text {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
    text-align: center;
    margin: 0;
}

.login-signup-link {
    color: var(--primary);
    font-weight: var(--text-body-weight-semibold);
    text-decoration: none;
}

    .login-signup-link:hover {
        text-decoration: underline;
    }

/* ========== Subject Card Component ========== */
.subject-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    margin: 25px;
    border: 1px solid var(--base-200);
    border-radius: 12px;
    width: 480px;
    min-width: 220px;
    box-sizing: border-box;
}

    /* Design system: bottom “Subject Approved” preview card */
    .subject-card.subject-approved-card {
        background-color: var(--base-50);
    }

.subject-card-actions {
    margin-top: auto;
}

/* Subject details top block */
.subject-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subject-details-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.subject-details-icon {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.subject-details-name {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    color: var(--base-900);
    margin: 0;
}

.subject-details-subtitle {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
    margin: 0;
}

/* Separator inside subject card */
.subject-card-separator {
    height: 1px;
    background-color: var(--base-200);
}

/* Subject approved badge (replaces status stepper) */
.subject-approved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background-color: #d9f0e5;
    color: #009b51;
    font-size: 12px;
    font-weight: 400;
    width: fit-content;
}

.subject-approved-badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: invert(32%) sepia(98%) saturate(800%) hue-rotate(120deg);
}

.subject-approved-badge-text {
    color: #009b51;
}

/* Status stepper */
.status-container {
    display: flex;
    align-items: flex-start;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.status-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.status-label {
    font-size: var(--text-body-xsmall-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
    white-space: nowrap;
}

/* Connector line between status steps, vertically centred with the 32px icon */
.status-connector {
    flex: 1;
    height: 4px;
    background-color: var(--base-75);
    margin-top: 14px; /* (32px icon / 2) - (4px line / 2) */
}

/* Status step modifiers */
.status-icon-wrap--done {
    background-color: var(--success);
}

.status-icon-wrap--muted {
    background-color: var(--base-75);
}

    .status-icon-wrap--muted .status-icon {
        filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(200%) hue-rotate(0deg);
    }

.status-label--done {
    color: var(--base-900);
}

.status-label--muted {
    color: var(--base-900);
}

.status-connector--done {
    background-color: var(--success);
}

/* Subject cards flex group */
.subject-cards-group {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Education Benefits block: white card on page canvas (left column, bottom section) */
.benefits-education-panel {
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
}

    .benefits-education-panel .component-library-desc {
        color: var(--base-700);
    }

.course-details-education-panel .component-library-desc {
    color: var(--base-700);
    /*max-width: 64rem;*/
}

.course-facility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.course-facility-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    border-radius: 10px;
    padding: 18px 20px;
    box-sizing: border-box;
    min-width: 0;
}

/* Facility cards: icon + column (tuition above facility title), then dl */
.course-facility-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.course-facility-header-tuition {
    margin: 0;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
}

.course-facility-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--base-200);
}

/* Facility cards: same structure as .dashboard-card-icon-wrap; primary circle + white icon (see .dashboard-card + .dashboard-card-icon) */
.course-facility-card .dashboard-card-icon-wrap {
    width: 56px;
    height: 56px;
    padding: 12px;
    flex-shrink: 0;
    text-align: start;
    margin-bottom: 0;
    background-color: var(--primary);
}

.course-facility-card .dashboard-card-icon {
    filter: brightness(0) invert(1);
}

.course-facility-card .course-facility-dl {
    width: 100%;
    align-self: stretch;
}

.course-facility-card-title {
    margin: 0;
    width: 100%;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight-semibold);
    color: var(--base-900);
    line-height: 1.35;
}

.course-facility-dl {
    margin: 0;
}

.course-facility-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px 16px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--base-200);
    font-size: var(--text-body-small-size);
}

    .course-facility-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .course-facility-row:first-of-type {
        padding-top: 0;
    }

    .course-facility-row dt {
        margin: 0;
        font-weight: var(--text-body-weight-semibold);
        color: var(--base-700);
    }

    .course-facility-row dd {
        margin: 0;
        color: var(--base-900);
        font-weight: var(--text-body-weight-regular);
        text-align: right;
    }

/* Tuition value in facility dl — extends .status-badge (pill); bg matches .sidebar-link.active */
.course-facility-tuition-badge {
    color: var(--primary);
    background-color: var(--base-75);
}

.course-facility-row--wrap dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .course-facility-grid {
        grid-template-columns: 1fr;
    }
}

/* Benefit type tabs container – tab design matches mobile tabs */
.benefit-tabs-container {
    width: 100%;
    overflow-anchor: none;
}

.benefit-tab-panels {
    overflow-anchor: none;
}

.benefit-tabs-bar {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 4px;
    background-color: var(--base-100);
    border: none;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.benefit-tabs-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.benefit-tab-panel-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    width: 100%;
}

/* Text-link style (no border; underline only) */
.benefit-tabs-more-details {
    flex-shrink: 0;
    display: inline-block;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    line-height: inherit;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-appearance: none;
    appearance: none;
}

    .benefit-tabs-more-details:hover {
        color: var(--text-hover-from-base);
        text-decoration: underline;
    }

    .benefit-tabs-more-details:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        color: var(--text-hover-from-base);
    }

.benefit-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background-color: transparent;
    color: var(--base-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--text-body-weight-regular);
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid transparent;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .benefit-tab:hover {
        color: var(--base-900);
    }

/* Inactive tab: darken icon on hover / focus to match text */
.benefit-tabs-container[data-active-benefit="ch33"]
.benefit-tab[href="#tab-tuition"]:hover
.benefit-tab-icon,
.benefit-tabs-container[data-active-benefit="ch33"]
.benefit-tab[href="#tab-tuition"]:focus-visible
.benefit-tab-icon,
.benefit-tabs-container[data-active-benefit="tuition"]
.benefit-tab[href="#tab-ch33"]:hover
.benefit-tab-icon,
.benefit-tabs-container[data-active-benefit="tuition"]
.benefit-tab[href="#tab-ch33"]:focus-visible
.benefit-tab-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.benefit-tab-text {
    margin: 0;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
    line-height: 1.2;
}

/* Communication page: tab count pills — brand colors, active vs inactive tab */
.communications-benefit-tabs .benefit-tab-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Active + inactive: same pill — light primary tint + primary text (token: --primary-bg-light) */
.communications-benefit-tabs .benefit-tab-count.doc-forms-form-status {
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: var(--primary-bg-light);
    color: var(--primary);
}

/* Active tab: white surface, brand primary icon & text */
.benefit-tabs-container[data-active-benefit="ch33"]
.benefit-tab[href="#tab-ch33"],
.benefit-tabs-container[data-active-benefit="tuition"]
.benefit-tab[href="#tab-tuition"] {
    background-color: var(--base-50);
    color: var(--primary);
    border-color: transparent;
}

.benefit-tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
    transition: filter 0.2s ease;
}

.benefit-tabs-container[data-active-benefit="ch33"]
.benefit-tab[href="#tab-ch33"]
.benefit-tab-icon,
.benefit-tabs-container[data-active-benefit="tuition"]
.benefit-tab[href="#tab-tuition"]
.benefit-tab-icon {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.benefit-tab-panels .benefit-tab-panel {
    display: none;
}

.benefit-tabs-container[data-active-benefit="ch33"]
.benefit-tab-panels
#tab-ch33,
.benefit-tabs-container[data-active-benefit="tuition"]
.benefit-tab-panels
#tab-tuition {
    display: block;
}

.benefit-tab-grid {
    padding-top: 0px;
}

.benefit-tab-cta {
    margin-top: 16px;
}

@media (max-width: 575.98px) {
    .benefit-tab-panel-footer {
        justify-content: stretch;
    }

        .benefit-tab-panel-footer .benefit-tabs-more-details {
            width: 100%;
            text-align: center;
        }

    .benefit-tabs-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .benefit-tabs-bar {
        width: fit-content;
        max-width: none;
    }
}

.benefit-tab-grid--empty {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-tab-empty-message {
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-regular);
    color: var(--base-700);
}

/* Subject cards in tabs (new/modern): one card per row; card has 3 inner columns */
.benefit-tab-grid .subject-cards-group--modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

    .benefit-tab-grid .subject-cards-group--modern .subject-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        min-height: 0;
        height: auto;
        display: grid;
        grid-template-columns: minmax(140px, 0.52fr) minmax(260px, 1.48fr) minmax( 160px, 0.85fr );
        align-items: start;
        gap: 16px;
    }

/* Subject cards in tabs (legacy copy): 3-card columns; classic 1-column card internals */
.benefit-tab-grid .subject-cards-group--legacy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

    .benefit-tab-grid .subject-cards-group--legacy .subject-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details {
    gap: 8px;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details-name::before {
        content: "";
        width: 34px;
        height: 34px;
        border-radius: 999px;
        flex-shrink: 0;
        filter: invert(24%) sepia(99%) saturate(3115%) hue-rotate(223deg) brightness(99%) contrast(96%);
    }

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details::after {
    content: none;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details-subtitle {
    margin: 0;
    margin-top: -2px;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-small-weight);
    color: var(--base-700);
    line-height: 1.45;
}

/* Existing horizontal separator not needed in 3-column card layout */
.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-separator {
    display: none;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-container {
    --subject-status-step-width: 104px;
    --subject-status-connector-width: 32px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--base-300) transparent;
    -webkit-overflow-scrolling: touch;
}

    .benefit-tab-grid
    .subject-cards-group--modern
    .subject-card
    .status-container::-webkit-scrollbar {
        height: 6px;
    }

    .benefit-tab-grid
    .subject-cards-group--modern
    .subject-card
    .status-container::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .benefit-tab-grid
    .subject-cards-group--modern
    .subject-card
    .status-container::-webkit-scrollbar-thumb {
        background-color: var(--base-300);
        border-radius: 999px;
    }

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-item {
    flex: 0 0 var(--subject-status-step-width);
    width: var(--subject-status-step-width);
    max-width: var(--subject-status-step-width);
    box-sizing: border-box;
    align-items: center;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-connector {
    flex: 0 0 var(--subject-status-connector-width);
    min-width: var(--subject-status-connector-width);
    max-width: var(--subject-status-connector-width);
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-label {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
    white-space: normal;
    width: 100%;
    max-width: 100%;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-item:nth-child(1) .status-label::after {
    content: "Your request has been received";
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-item:nth-child(3) .status-label::after {
    content: "We're reviewing your request";
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-item:nth-child(5) .status-label::after {
    content: "You'll be notified once approved";
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-label::after {
    font-size: 11px;
    font-weight: var(--text-body-small-weight);
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    max-width: 96px;
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-label--done::after {
    color: var(--base-900);
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .status-label--muted::after {
    color: var(--base-900);
}

.benefit-tab-grid
.subject-cards-group--modern .subject-card
.status-label:not(.status-label--done):not(.status-label--muted)::after {
    color: var(--base-900);
}

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions {
    --subject-step-accent: var(--base-900);
    --subject-step-accent-bg: color-mix(in srgb, var(--base-900) 14%, var(--base-50));
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-left: 1px solid var(--base-200);
    padding-left: 16px;
}

/*.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions::before {
  content: "Step 1 of 3";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: var(--text-body-small-size);
  font-weight: var(--text-body-weight-semibold);
  color: var(--subject-step-accent);
  background-color: var(--subject-step-accent-bg);
}*/

/*.benefit-tab-grid
  .subject-cards-group--modern .subject-card:has(
    .status-item:nth-child(3)
      .status-label:not(.status-label--done):not(.status-label--muted)
  )
  .subject-card-actions::before {
  content: "Step 2 of 3";
  color: var(--subject-step-accent);
  background-color: var(--subject-step-accent-bg);
}*/

.benefit-tab-grid
.subject-cards-group--modern .subject-card:has(.status-item:nth-child(5) .status-label.status-label--done)
.subject-card-actions {
    --subject-step-accent: var(--success);
    --subject-step-accent-bg: var(--success-light);
}

    .benefit-tab-grid
    .subject-cards-group--modern .subject-card:has(.status-item:nth-child(5) .status-label.status-label--done)
    .subject-card-actions::before {
        content: "Step 3 of 3";
        color: var(--subject-step-accent);
        background-color: var(--subject-step-accent-bg);
    }

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions .btn-outline.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: var(--subject-step-accent);
    color: var(--subject-step-accent);
}

    /*.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions .btn-outline.btn::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--subject-step-accent);
  -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  -webkit-mask-position: center;
  mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/chevron-right.svg");
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  mask-position: center;
}*/

    .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions .btn-outline.btn:hover,
    .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions .btn-outline.btn:focus-visible {
        border-color: var(--subject-step-accent);
        color: var(--subject-step-accent);
        background-color: color-mix(in srgb, var(--subject-step-accent) 8%, var(--base-50));
    }

/* Modern subject cards: tablet — details + steps on first row; actions (button) full width below */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .benefit-tab-grid .subject-cards-group--modern .subject-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-rows: auto auto;
        align-items: start;
        gap: 14px 16px;
    }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details {
            grid-column: 1;
            grid-row: 1;
            min-width: 0;
        }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .status-container {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            max-width: 100%;
        }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions {
            grid-column: 1 / -1;
            grid-row: 2;
            border-left: none;
            border-top: 1px solid var(--base-200);
            padding-left: 0;
            padding-top: 12px;
            margin-top: 0;
        }
}

/* Modern subject cards: mobile — single column (details, steps, button) */
@media (max-width: 767.98px) {
    .benefit-tab-grid .subject-cards-group--modern .subject-card {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
    }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-details {
            grid-column: 1;
            grid-row: auto;
            min-width: 0;
        }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .status-container {
            grid-column: 1;
            grid-row: auto;
            min-width: 0;
            max-width: 100%;
        }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions {
            grid-column: 1;
            grid-row: auto;
            border-left: none;
            border-top: 1px solid var(--base-200);
            padding-left: 0;
            padding-top: 12px;
            margin-top: 0;
        }

        .benefit-tab-grid .subject-cards-group--modern .subject-card .status-label::after {
            max-width: 88px;
        }
}

.communications-benefit-tabs .subject-card,
.component-library .benefit-tabs-container .subject-card {
    background-color: var(--base-50);
}

.enrollment-overview-cards {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.enrollment-overview-card {
    padding: 18px;
    border: 1px solid var(--base-200);
    border-radius: 12px;
    background-color: var(--base-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.enrollment-overview-chart-wrap {
    position: relative;
    flex-shrink: 0;
    width: 186px;
    height: 186px;
    border-radius: 50%;
    padding: 10px;
    background: conic-gradient( #16a34a 0 33%, #0ea5e9 33% 61%, #f59e0b 61% 83%, #8b5cf6 83% 100% );
}

.enrollment-overview-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--base-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}

.enrollment-overview-chart-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    filter: invert(30%) sepia(84%) saturate(1061%) hue-rotate(117deg) brightness(93%) contrast(94%);
}

.enrollment-overview-chart-total {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--base-950);
}

.enrollment-overview-chart-label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--base-600);
}

.enrollment-overview-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    min-width: 220px;
}

.enrollment-overview-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.enrollment-overview-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

.enrollment-overview-legend-dot--eng {
    background-color: #16a34a;
}

.enrollment-overview-legend-dot--math {
    background-color: #0ea5e9;
}

.enrollment-overview-legend-dot--history {
    background-color: #f59e0b;
}

.enrollment-overview-legend-dot--cs {
    background-color: #8b5cf6;
}

.enrollment-overview-legend-text {
    color: var(--base-800);
    font-size: 14px;
    font-weight: 500;
}

.enrollment-overview-card--stacked {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .enrollment-overview-card--stacked .enrollment-overview-legend {
        width: 100%;
        min-width: 0;
        margin-top: 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 14px;
    }

.dashboard-footer {
    margin: 26px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--base-200);
    border-radius: 12px;
    background-color: var(--base-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dashboard-footer-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--base-200);
    flex-shrink: 0;
}

.dashboard-footer-copy {
    color: var(--base-700);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.dashboard-footer-links {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--base-600);
}

.dashboard-footer-legal {
    color: var(--base-600);
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
    max-width: 640px;
}

@media (max-width: 767.98px) {
    .enrollment-overview-cards {
        grid-template-columns: 1fr;
    }

    .enrollment-overview-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .enrollment-overview-chart-wrap {
        width: 170px;
        height: 170px;
        margin: 0 auto;
    }

    .enrollment-overview-legend {
        width: 100%;
        min-width: 0;
    }

    .enrollment-overview-card--stacked .enrollment-overview-legend {
        display: grid;
        gap: 10px;
    }

    .dashboard-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
    }

    .dashboard-footer-copy {
        white-space: normal;
    }

    .dashboard-footer-legal {
        text-align: left;
        max-width: none;
    }
}

/*Custom CSS Below*/
.warning-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--warning-light));
    border-radius: 8px;
    background-color: var(--warning-light);
    color: color-mix(in srgb, var(--warning) 78%, var(--base-900));
    line-height: 1.35;
}

.alert-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--danger-light));
    border-radius: 8px;
    background-color: var(--danger-light);
    color: color-mix(in srgb, var(--danger) 78%, var(--base-900));
    line-height: 1.35;
}

.simple-modal-body {
    /*max-height: 400px;*/
    overflow-y: auto;
    padding-left: 12px;
    padding-right: 12px;
}

.nav-tabs .nav-link.active {
    background-color: var(--base-50);
    color: var(--primary);
    border-color: transparent;
}

    .nav-tabs .nav-link.active .benefit-tab-icon {
        filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
    }

.nav-tabs .nav-link:not(.active):focus, .nav-tabs .nav-link:not(.active):hover {
    filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

/* Radzen CSS*/
.rz-dialog:not(.rz-dialog-alert):not(.rz-dialog-confirm) > .rz-dialog-titlebar {
    display: none;
}

.custom-dialog > .rz-dialog-content {
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    .custom-dialog.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        top: 100px !important;
    }
}

.rz-tabview-nav {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 6px;
    background-color: var(--base-100);
    border: none;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background-color: var(--base-50);
    color: var(--primary);
    border-color: transparent;
}

.rz-tabview-title {
    font-weight: bold;
}

.rz-tabview-icon {
    filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected .rz-tabview-icon {
    filter: invert(25%) sepia(31%) saturate(845%) hue-rotate(87deg) brightness(93%) contrast(91%);
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels {
    border-top: unset;
}

div[role=tablist] > ul {
    flex-wrap: wrap !important;
}

.btn-border {
    border: 1px solid var(--base-200) !important;
}

.btn-primary:hover {
    filter: none;
    background: var(--primary);
    color: var(--base-50);
}

.student-phase-setp {
    color: var(--subject-step-accent);
    background-color: var(--subject-step-accent-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: var(--text-body-small-size);
    font-weight: var(--text-body-weight-semibold);
}

.row-question {
    border-bottom: 1px solid gray;
}

.tab-count {
    transition: background-color 0.2s ease, color 0.2s ease !important;
    background-color: var(--primary-bg-light) !important;
    color: var(--primary) !important;
    margin-left: 5px !important;
}