/**
 * Carbon Components CSS
 * Reusable component styles
 */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../../res/fonts/IBMPlexSans-VariableFont.ttf");
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

i.fa-gear:hover {
    animation: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
i.fa-circle-notch.rotate {
    visibility: visible !important;
    display: inline-block;
    animation: rotate 2s infinite linear;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--cds-font-family);
    font-size: 14px;
    background: var(--cds-background);
    color: var(--cds-text-primary);
    line-height: var(--cds-line-height-body);
    letter-spacing: var(--cds-letter-spacing);
}

.hide {
    display: none !important;
}

/* ============================================
   Links
   ============================================ */
a {
    color: var(--cds-link-visited);
    text-decoration: none;
}

/* ============================================
   LAYOUT
   ============================================ */
.layout {
    min-height: 100vh;
    display: flex;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    background: var(--menu-bg);
    padding: var(--cds-spacing-07);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-collapsed);
    z-index: 100;
    transition: width 0.2s ease;
}

.sidebar--expanded {
    width: var(--sidebar-width);
    align-items: flex-start;

    button.sidebar__toggle {
        margin-bottom: var(--cds-spacing-06);
        position: relative;
        left: -5px;
        top: 5px;
    }
}
#sidebar_minimized {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cds-spacing-05);
    text-align: center;
    width: var(--sidebar-collapsed);
    z-index: 100;
    transition: width 0.2s ease;

    a.sidebar__link {
        position: relative;
    }

    span.sidebar_badge {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: var(--cds-tag-background-purple);
        border: 1px solid var(--cds-layer-02);
        border-radius: 12px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
}
#sidebar_minimized.hide {
    display: none;
}

/* Collapsed state - hide text elements */
.sidebar:not(.sidebar--expanded) .sidebar__link-text,
.sidebar:not(.sidebar--expanded) .sidebar__link-arrow,
.sidebar:not(.sidebar--expanded) .sidebar__badge,
.sidebar:not(.sidebar--expanded) .sidebar__nav {
    display: none;
}

button.sidebar__toggle {
    width: 30px;
    height: 30px;
    /* margin-bottom: var(--cds-spacing-03); */
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

span.sidebar__label {
    color: white;
    font-size: var(--cds-body-short-01);
    margin-bottom: var(--cds-spacing-07);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    width: 224px;  /* Accordion width from Figma */
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
    box-shadow: inset 0 1px 0 var(--cds-border-strong-01);  /* Top border separator */
    transition: color 0.15s;
}

.sidebar__link:hover {
    color: var(--cds-purple-40);
}

.sidebar__link--active {
    color: var(--cds-purple-40);  /* #be95ff */
}

.sidebar__link-text {
    flex: 1;
}

.sidebar__link-arrow {
    width: 16px;
    height: 17px;
    flex-shrink: 0;
    fill: currentColor;
}

.sidebar__link--active .sidebar__link-arrow {
    fill: var(--cds-purple-40);
}

.sidebar__badge {
    /* Purple Tag from Figma token-specs.md */
    background: var(--cds-tag-background-purple, #f6f2ff);
    color: var(--cds-tag-color-purple, #6929c4);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.32px;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
}
.sidebar__badge--warning {
    background: var(--cds-support-warning);
    color: #000;
}
.sidebar__badge--error {
    background: var(--cds-support-error);
    color: #fff;
}
.sidebar__badge--success {
    background: var(--cds-support-success);
    color: #fff;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main {
    transition: margin 0.2s ease;
    margin-left: var(--sidebar-collapsed);
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.sidebar-expanded .main {
    margin-left: var(--sidebar-width);
}

/* ============================================
   HEADER AREA (Dark)
   ============================================ */
.header-area {
    background: var(--menu-bg);
    padding: var(--cds-spacing-06) var(--cds-spacing-08);
    padding-bottom: var(--cds-spacing-09);
    overflow: visible;
    height: 375px;
    position: relative;
    border-left: 1px solid var(--cds-border-strong-01);
}
.header-light {
    padding: 27px 40px;
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
    min-height: 265px;
    position: relative;

    .header-actions {
        position: absolute;
        top: 20px;
        right: 40px;
    }

    .avatar-popup {
        color: var(--cds-text-primary);
        background: white;
        border: 1px solid var(--cds-text-primary);
        top: 44px;
        right: 0px;

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

    .lecture-meta {
        font-size: 11px;
        font-weight: 400;
        line-height: 150%;
        margin-top: 40px;
    }
}

.header-light__stats {
    display: flex;
    gap: var(--cds-spacing-07);
    margin-top: var(--cds-spacing-05);
}

.header-light__stat {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-02);
}

.header-light__stat + .header-light__stat {
    padding-left: var(--cds-spacing-07);
    border-left: 1px solid var(--cds-border-subtle-01);
}

.header-light__stat-label {
    font-size: var(--cds-label-01);
    color: var(--cds-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
}

.header-light__stat-value {
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    color: var(--cds-text-primary);
}

.header-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--cds-spacing-07);
}

.logo img {
    height: 70px;
}

.logo-wrap {
    position: relative;
    left: -12px;
    display: block;
}

.logo-base {
    display: block;
}

.logo-net {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

.header-actions {
    display: flex;
    gap: var(--cds-spacing-04);
}

.icon-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--cds-gray-60);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    border: none;
}

.icon-btn:hover {
    background: var(--cds-gray-50);
}

.avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--profile-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--cds-body-short-01);
    text-decoration: none;
    cursor: pointer;
}

.avatar-popup {
    display: none;
    position: absolute;
    right: 20px;
    top: 68px;
    padding: 16px;
    width: 300px;
    color: white;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border-color);
    z-index: 10;

    h4, p, a, hr {
        margin-bottom: 15px;
    }

    a {
        text-decoration: none;
        display: block;
        color: white;
    }
}

.avatar-popup.active {
    display: block;
}

/* ============================================
   STATS ROW
   ============================================ */
.stats-row {
    display: flex;
    gap: var(--cds-spacing-10);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-02);
}

.stat-label {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    font-size: var(--cds-label-01);
    color: var(--cds-text-placeholder);
}

.stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.stat-dot--success { background: var(--cds-support-success); }
.stat-dot--error { background: var(--cds-support-error); }
.stat-dot--warning { background: var(--cds-support-warning); }
.stat-dot--info { background: var(--cds-support-info); }

.stat-value {
    font-size: 54px;
    font-weight: 300;
    line-height: 64px;
    color: white;
}

/* Page Title - DRY component for page headers */
.page-title {
    font-size: 42px;
    font-weight: 300;
    line-height: 50px;
    color: white;
    margin-bottom: var(--cds-spacing-05);
}

/* Page Subtitle - DRY component for subtitle under page-title */
.page-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--cds-spacing-05);
}

.page-subtitle .back-link {
    color: var(--cds-purple-40);
    text-decoration: none;
}

.page-subtitle .back-link i {
    margin-right: 4px;
}

/* Header Stats Row - DRY component for stats in header area */
.header-stats {
    display: flex;
    gap: var(--cds-spacing-09);
    margin-top: 55px;
}
.header-stats .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-02);
}
.header-stats .stat-item + .stat-item {
    height: 110px;
    margin-left: 15px;
    border-left: 1px solid var(--cds-border-strong-01);
    padding-left: var(--cds-spacing-07);
}

/* ============================================
   CONTENT AREA
   ============================================ */
.content-area {
    margin: 40px;
    margin-top: 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--cds-spacing-07);
}

.content-left,
.content-right {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-07);
}

.content-right {
    border-left: 1px solid var(--cds-border-subtle-00);
    padding-left: var(--cds-spacing-07);
}

/* ============================================
   SECTION
   ============================================ */
.section-title {
    font-size: 24px;
    font-weight: 400;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-05);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--cds-gray-10);
    box-shadow: var(--cds-shadow-subtle);
    padding: var(--cds-spacing-06);
}

.card--assessment {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cds-spacing-05);
}

.card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-03);
}

.card__text {
    font-size: var(--cds-label-01);
    color: var(--cds-text-primary);
    line-height: 1.5;
    margin-bottom: var(--cds-spacing-05);
}

.card__image img {
    width: 200px;
    height: auto;
}

.card__content {
    display: flex;
    flex-direction: column;
}

/* ============================================
   INFO CARD
   ============================================ */
.info-card {
    background: var(--cds-gray-10);
    box-shadow: var(--cds-shadow-subtle);
    padding: var(--cds-spacing-05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-01);
}

.info-card__label {
    font-size: var(--cds-body-short-01);
    color: var(--cds-text-secondary);
}

.info-card__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text-primary);
}

/* ============================================
   LINKS
   ============================================ */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    color: var(--cds-link-visited);
    text-decoration: none;
    font-size: 16px;
}

.link-arrow:hover {
    text-decoration: underline;
}

.link-arrow svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   BADGE
   ============================================ */
.badge {
    background: var(--cds-purple-20);
    color: var(--cds-purple-70);
    padding: var(--cds-spacing-01) var(--cds-spacing-03);
    border-radius: 12px;
    font-size: var(--cds-label-01);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
    margin-bottom: var(--cds-spacing-06);
}

.form-label {
    display: block;
    font-size: var(--cds-label-01);
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-03);
    letter-spacing: 0.32px;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: var(--cds-spacing-04) 0;
    font-size: var(--cds-body-short-01);
    font-family: var(--cds-font-family);
    color: var(--cds-text-primary);
    background: var(--cds-field-01);
    border: none;
    border-bottom: 1px solid var(--cds-gray-50);
    outline: none;
    transition: border-color 0.15s;
}

.form-input::placeholder {
    color: var(--cds-text-placeholder);
}

.form-input:focus {
    border-bottom-color: var(--cds-focus);
}

.form-input--error {
    border-bottom-color: var(--cds-support-error);
}

.form-error {
    color: var(--cds-support-error);
    font-size: var(--cds-label-01);
    margin-top: var(--cds-spacing-02);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    font-size: var(--cds-body-short-01);
    font-family: var(--cds-font-family);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn--primary {
    background: var(--cds-button-primary);
    color: var(--cds-text-on-color);
}

.btn--primary:hover {
    background: var(--cds-button-primary-hover);
}

.btn--primary:active {
    background: var(--cds-button-primary-active);
}

.btn--secondary {
    background: var(--cds-button-secondary);
    color: var(--cds-text-on-color);
}

.btn--secondary:hover {
    background: var(--cds-button-secondary-hover);
}

.btn--block {
    width: 100%;
}

.btn--disabled {
    background: var(--cds-button-disabled);
    cursor: not-allowed;
}

/* ============================================
   TABS
============================================ */

.carbon-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    margin: 40px;
    margin-bottom: 0;
}

.carbon-tabs__list {
    display: flex;
    gap: 0;
    border-right: 1px solid var(--cds-border-subtle-01);
}

.carbon-tab {
    padding: var(--cds-spacing-05) var(--cds-spacing-05);
    background-color: var(--cds-layer-selected-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-bottom: none;
    border-top: 2px solid transparent;
    font-size: 14px;
    color: var(--cds-text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    margin-left: -1px;
    text-decoration: none;
    transition: all 0.15s ease;
    min-width: 125px;
    text-align: center;
}

.carbon-tab:first-child {
    margin-left: 0;
}

.carbon-tab__spacer {
    flex: 1;
    width: 100px;
}
.carbon-tab--admin {
    position: relative;
    background-color: var(--cds-gray-30);
    border-color: var(--cds-gray-40);

    span {
        position: absolute;
        top: -2px;
        left: 2px;
        font-size: var(--cds-label-01);
    }
}

.carbon-tab:hover {
    color: var(--cds-text-primary);
    background: var(--cds-layer-hover-01);
}

.carbon-tab--active {
    font-weight: 600;
    background-color: var(--cds-layer-01);
    color: var(--cds-text-primary);
    border-top: 2px solid var(--cds-purple-60);
}

.carbon-tabs__spacer {
    flex: 1;
}

.carbon-tabs__actions {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
}

/* ============================================
   CHECKBOX
   ============================================ */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
}

.checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--cds-interactive);
}

.checkbox-label {
    font-size: var(--cds-body-short-01);
    color: var(--cds-text-primary);
}

/* ============================================
   LOGIN PAGE SPECIFIC
   ============================================ */
.login-page {
    background: var(--menu-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cds-spacing-05);

    .tabs {
        padding-top: 45px;
    }
}

.login-logo {
    margin-bottom: var(--cds-spacing-07);
}

.login-logo .logo-wrap {
    display: inline-block;
    position: relative;
}

.login-logo .logo-base {
    height: 70px;
    width: auto;
    display: block;
}

.login-logo .logo-net {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-card {
    background: var(--cds-background);
    width: 100%;
    max-width: 620px;
    min-height: 500px;
    box-shadow: var(--cds-shadow-card-hover);

    .tabs {
      display: flex;
      border-bottom: 2px solid var(--cds-gray-20);
    }
    .tab {
        flex: 1;
        padding: var(--cds-spacing-04) var(--cds-spacing-05);
        text-align: center;
        font-size: var(--cds-body-short-01);
        color: var(--cds-text-secondary);
        cursor: pointer;
        border: none;
        background: none;
        position: relative;
        transition: color 0.15s;
    }
    .tab:hover {
        color: var(--cds-text-primary);
    }
    .tab--active {
        color: var(--cds-text-primary);
        font-weight: 600;
    }
    .tab--active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--cds-purple-50);
    }
}

.login-form {
    padding: var(--cds-spacing-12);
    .form-input {
        border: none;
        border-bottom: 1px solid var(--cds-border-strong-01)
    }
    .login-btn {
        background-color: var(--cds-cool-gray-55);
        margin-top: 50px;
        height: 36px;
    }
    .login-btn:hover {
        background-color: var(--cds-cool-gray-40);
    }
}

.login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-link {
    font-size: var(--cds-body-short-01);
    color: var(--cds-text-primary);
    text-decoration: none;
}

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



/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--cds-spacing-01); }
.mt-2 { margin-top: var(--cds-spacing-02); }
.mt-3 { margin-top: var(--cds-spacing-03); }
.mt-4 { margin-top: var(--cds-spacing-04); }
.mt-5 { margin-top: var(--cds-spacing-05); }
.mb-1 { margin-bottom: var(--cds-spacing-01); }
.mb-2 { margin-bottom: var(--cds-spacing-02); }
.mb-3 { margin-bottom: var(--cds-spacing-03); }
.mb-4 { margin-bottom: var(--cds-spacing-04); }
.mb-5 { margin-bottom: var(--cds-spacing-05); }

/* ============================================
   STORY MODE
   ============================================ */
.story-box {
    background: linear-gradient(to bottom, var(--cds-gray-10), white);
    border-left: 4px solid var(--cds-purple-50);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-05);
    border-radius: 0 4px 4px 0;
}

.story-box__intro {
    font-size: 16px;
    font-style: italic;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-05);
    padding-bottom: var(--cds-spacing-04);
    border-bottom: 1px solid var(--cds-border-subtle-00);
}

.story-box__scenario {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-04);
}

.story-box__question {
    font-weight: 600;
    font-size: 16px;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-04);
}

.story-box__options {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-03);
}

.story-option {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-04);
    background: white;
    border: 1px solid var(--cds-border-subtle-00);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.story-option:hover {
    border-color: var(--cds-purple-50);
    background: var(--cds-purple-10);
}

.story-option--selected {
    border-color: var(--cds-purple-60);
    background: var(--cds-purple-10);
}

.story-option__letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cds-gray-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--cds-text-primary);
    flex-shrink: 0;
}

.story-option--selected .story-option__letter {
    background: var(--cds-purple-60);
    color: white;
}

.story-option__text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cds-text-primary);
}

/* ============================================
   CHAT MODE
   ============================================ */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 500px;
    border: 1px solid var(--cds-border-subtle-00);
    border-radius: 4px;
    background: white;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--cds-spacing-05);
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-04);
}

.chat-message {
    max-width: 80%;
    padding: var(--cds-spacing-04);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-message--ai {
    background: var(--cds-gray-10);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.chat-message--user {
    background: var(--cds-purple-10);
    color: var(--cds-text-primary);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.chat-message__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cds-purple-50);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: var(--cds-spacing-02);
}

.chat-input-area {
    display: flex;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-04);
    border-top: 1px solid var(--cds-border-subtle-00);
    background: var(--cds-gray-10);
}

.chat-input-area textarea {
    flex: 1;
    min-height: 48px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--cds-border-subtle-00);
    border-radius: 4px;
    padding: var(--cds-spacing-03);
    font-size: 14px;
    font-family: var(--cds-font-family);
    background: white;
}

.chat-input-area textarea:focus {
    outline: none;
    border-color: var(--cds-purple-50);
}

.chat-send-btn {
    background: var(--cds-purple-60);
    color: white;
    border: none;
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    font-size: 14px;
    font-family: var(--cds-font-family);
    transition: background-color 0.15s;
}

.chat-send-btn:hover {
    background: var(--cds-purple-70);
}

.chat-send-btn:disabled {
    background: var(--cds-gray-30);
    cursor: not-allowed;
}

.chat-send-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   AI LOADING STATE
   ============================================ */
.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cds-spacing-07);
    color: var(--cds-text-secondary);
}

.ai-loading__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--cds-gray-20);
    border-top-color: var(--cds-purple-50);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--cds-spacing-04);
}

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

.ai-loading p {
    font-size: 14px;
}

/* ============================================
   COURSES PAGE
   ============================================ */

.courses-header-illustration {
    position: absolute;
    right: var(--cds-spacing-07);
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    opacity: 0.9;
    pointer-events: none;
}

.header-illustration {
    position: absolute;
    right: var(--cds-spacing-07);
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

/* Tabs (Contained Style) */
.tabs-row {
    display: flex;
    align-items: center;
    background: white;
    padding: 0 var(--cds-spacing-05);
}

.tabs-contained {
    display: flex;
}

.tab-item {
    padding: 15px 16px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
    color: var(--cds-text-secondary);
    background: var(--cds-gray-20);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    position: relative;
}

.tab-item:hover {
    color: var(--cds-text-primary);
}

.tab-item--active {
    background: var(--cds-gray-10);
    color: var(--cds-text-primary);
    font-weight: 600;
    border-top: 2px solid var(--cds-purple-60);
}

.tab-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--cds-border-strong-01);
}

/* View Toggle */
.tabs-row__spacer {
    flex: 1;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
}

.view-toggle__btn {
    padding: var(--cds-spacing-02);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-text-primary);
    opacity: 0.6;
    transition: opacity 0.15s;
}

.view-toggle__btn:hover,
.view-toggle__btn--active {
    opacity: 1;
    color: var(--cds-purple-60);
}

.view-toggle__separator {
    width: 1px;
    height: 24px;
    background: var(--cds-gray-30);
}

.tabs-row__search {
    padding: var(--cds-spacing-03);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-text-primary);
}

/* Horizontal Divider */
.divider {
    height: 1px;
    background: var(--cds-gray-30);
    margin: 0;
}

/* Course Grid */
.course-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cds-spacing-06);
}

@media (max-width: 1400px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Course Card */
.course-card-carbon {
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--cds-gray-10);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 320px;
}

.course-card-carbon__image {
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cds-teal-10) 0%, white 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card-carbon__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.course-card-carbon__content {
    border: 1px solid #121619;
    padding: var(--cds-spacing-04) var(--cds-spacing-04) var(--cds-spacing-05);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card-carbon__meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--cds-text-primary);
    margin-bottom: var(--cds-spacing-02);
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
}

.course-card-carbon__separator {
    color: var(--cds-text-secondary);
}

.course-card-carbon__semester {
    font-weight: 400;
}

.course-card-carbon__name {
    font-size: 16px;
    font-weight: 700;
    color: black;
    line-height: 1.3;
    text-transform: capitalize;
    margin-bottom: var(--cds-spacing-03);
}

.course-card-carbon__info {
    font-size: 12px;
    color: var(--cds-text-primary);
    line-height: 1.5;
    margin-bottom: var(--cds-spacing-04);
}

.course-card-carbon__info p {
    margin: 0;
}

.course-card-carbon__actions {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-04);
    margin-top: auto;
    justify-content: flex-end;
}

.course-card-carbon__link {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    color: var(--cds-purple-60);
    text-decoration: none;
    font-size: 16px;
    line-height: 22px;
    transition: color 0.15s;
}

.course-card-carbon__link:hover {
    color: var(--cds-purple-70);
}

.course-card-carbon__link svg {
    width: 20px;
    height: 20px;
}

.course-card-carbon__link--secondary {
    font-size: 14px;
}

.course-card-carbon__link--secondary svg {
    width: 16px;
    height: 16px;
}

/* Student Count Badge */
.course-card-carbon__badge {
    position: absolute;
    top: var(--cds-spacing-03);
    right: var(--cds-spacing-03);
    background: var(--cds-tag-background-purple);
    color: var(--cds-tag-color-purple);
    padding: var(--cds-spacing-01) var(--cds-spacing-03);
    font-size: 12px;
    border-radius: 12px;
    font-weight: 500;
}

/* Course List View (alternative) */
table.course-list {
    width: 100%;
    border-collapse: collapse;

    tr {
        height: 64px;
    }
    /* alternate row color */
    tr:nth-child(odd) {
        background-color: var(--cds-gray-05);
    }

    th,td {
        padding: 15px;
    }
    th {
        font-weight: 400;
        color: var(--menu-text-muted);
        background-color: white;
        text-align: left;
    }
    td {
        cursor: pointer;
    }
    td.course-list__course {
        font-weight: 600;
    }
}

/* Carbon Pagination */
.carbon-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    background: var(--cds-layer-01, #262626);
    border-top: 1px solid var(--cds-border-subtle-01, #393939);
    font-size: 14px;
    color: var(--cds-text-secondary);
}

.carbon-pagination__left,
.carbon-pagination__right {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
}

.carbon-pagination__label {
    white-space: nowrap;
}

.carbon-pagination__select {
    background: var(--cds-field-01, #393939);
    border: none;
    border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
    color: var(--cds-text-primary);
    padding: var(--cds-spacing-02) var(--cds-spacing-03);
    font-size: 14px;
    cursor: pointer;
    min-width: 60px;
}

.carbon-pagination__select:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.carbon-pagination__pages {
    white-space: nowrap;
}

.carbon-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--cds-icon-primary);
    cursor: pointer;
    border-radius: 0;
}

.carbon-pagination__btn:hover:not(:disabled) {
    background: var(--cds-layer-hover-01, #4c4c4c);
}

.carbon-pagination__btn:disabled {
    color: var(--cds-text-disabled);
    cursor: not-allowed;
}

/* Empty State */
.course-empty {
    text-align: center;
    padding: var(--cds-spacing-09);
    color: var(--cds-text-secondary);
}

.course-empty__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--cds-spacing-04);
    opacity: 0.5;
}

.course-empty__text {
    font-size: 16px;
    margin-bottom: var(--cds-spacing-04);
}

.course-empty__link {
    color: var(--cds-purple-60);
    text-decoration: none;
}

/* ============================================
   COURSE DETAIL PAGE
   ============================================ */
/* Course Meta in Header */
.course-detail__meta {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-02);
    font-size: 14px;
    margin-top: 40px;
}

.course-detail__code {
    font-weight: 600;
}

.course-detail__separator {
    color: var(--cds-text-primary);
}

.course-detail__title, .lecture-detail__title {
    font-size: 42px;
    font-style: normal;
    font-weight: 300;
    line-height: 50px;
}

/* Prof Quick Actions */
.course-detail__actions {
    display: flex;
    gap: var(--cds-spacing-03);
    margin-top: var(--cds-spacing-05);
}

.course-detail__about {
    margin: 40px;
    display: flex;
    gap: var(--cds-spacing-05);

    div.about-text {
        position: relative;
        flex: 1;
        max-width: 800px;
        span#edit {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            color: var(--cds-text-primary);
        }
        * {
            margin: revert;
            padding: revert;
        }
        #about-description {
            margin-top: var(--cds-spacing-07);
        }
    }
    div.about-image {
        position: relative;
        flex: 1;
        max-width: 525px;
        img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        span#upload {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            color: var(--cds-text-primary);
        }
        form#imageUpload {
            display: none;
        }
    }
}
dialog#about_editDialog {
    textarea {
        width: 100%;
        height: 400px;
        resize: vertical;
    }
}


/* Tools Bar */
.tools-bar {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    background: white;
    border-bottom: 1px solid var(--cds-gray-20);
}

.tools-bar__btn {
    padding: var(--cds-spacing-02);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-text-primary);
    border-radius: 4px;
    position: relative;
    transition: background 0.15s;
}

.tools-bar__btn:hover {
    background: var(--cds-gray-10);
}

.tools-bar__btn--notification::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--cds-red-60);
    border-radius: 50%;
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    gap: 1px;
    background: var(--cds-gray-30);
    margin-top: var(--cds-spacing-05);
    border: 1px solid var(--cds-gray-30);
}

.calendar-header {
    background: var(--cds-gray-10);
    padding: var(--cds-spacing-03);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
}

.calendar-cell {
    background: white;
    padding: var(--cds-spacing-04);
    min-height: 160px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.15s;
}

.calendar-cell:hover {
    color: var(--cds-text-primary);
    background: var(--cds-layer-hover-01);
}

.calendar-cell--done {
    background: var(--cds-gray-10);
    opacity: 0.8;
    cursor: pointer;
}

.calendar--current {
    position: absolute;
    top: var(--cds-spacing-04);
    right: var(--cds-spacing-04);
    background: #E8DAFF;
    color: #6929C4;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 13px;
}

/* Calendar Cell Elements */
.calendar-cell__grip {
    position: absolute;
    top: var(--cds-spacing-02);
    right: var(--cds-spacing-02);
    color: var(--cds-gray-50);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
}

.calendar-cell:hover .calendar-cell__grip { opacity: 1; }

.calendar-cell__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    margin-top: 40px;

    a:hover {
        text-decoration: none;
        color: inherit;
    }
}

.calendar-cell__edit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-gray-50);
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.calendar-cell:hover .calendar-cell__edit { opacity: 1; }

.calendar-cell__link {
    color: var(--cds-text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.calendar-cell__link:hover {
    color: var(--cds-purple-60);
}

.calendar-cell__add {
    position: absolute;
    top: var(--cds-spacing-02);
    right: var(--cds-spacing-02);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-gray-50);
    opacity: 0;
    transition: opacity 0.15s;
}

.calendar-grid:not(.no-admin) .calendar-cell:hover .calendar-cell__add { opacity: 1; }

/* Calendar Icons */
.calendar-cell__icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cds-spacing-02);
    margin-top: auto;
}

.calendar-cell__icon {
    display: flex;
    align-items: center;
    gap: 2px;
}

.icon-admin {
    color: var(--cds-gray-50);
    opacity: 0;
    transition: opacity 0.15s;
}

.calendar-grid:not(.no-admin) .calendar-cell:hover .icon-admin { opacity: 1; }

.icon-quiz, .icon-lab {
    color: var(--cds-purple-60);
    padding: 4px;
    border-radius: 4px;
    /* background: var(--cds-purple-10); */
}

.icon-lab {
    color: var(--cds-teal-60);
    /* background: var(--cds-teal-10); */
}

.icon--invisible {
    opacity: 0.4;
}

.icon--graded {
    /* background: var(--cds-green-10); */
}

.icon--graded.icon-quiz { color: var(--cds-green-60); }
.icon--graded.icon-lab { color: var(--cds-green-60); }

.icon--ungraded {
    background: var(--cds-yellow-10);
}

.icon--ungraded.icon-quiz { color: var(--cds-yellow-60); }
.icon--ungraded.icon-lab { color: var(--cds-yellow-60); }

/* Calendar Date */
.calendar-cell__date {
    position: absolute;
    top: var(--cds-spacing-04);
    left: var(--cds-spacing-04);
    font-size: 14px;
    color: var(--cds-text-secondary);
}

/* Calendar Total */
.calendar-total {
    padding: var(--cds-spacing-05);
}

/* Modal Carbon */
.modal-carbon {
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

.modal-carbon::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-carbon__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cds-spacing-05);
    background: var(--cds-gray-10);
    border-bottom: 1px solid var(--cds-gray-20);
}

.modal-carbon__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.modal-carbon__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-text-secondary);
    padding: 0;
}

.modal-carbon__close:hover {
    color: var(--cds-text-primary);
}

.modal-carbon form {
    padding: var(--cds-spacing-05);
}

.modal-carbon__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--cds-spacing-03);
    margin-top: var(--cds-spacing-05);
    padding-top: var(--cds-spacing-04);
    border-top: 1px solid var(--cds-gray-20);
}

.modal-carbon__content label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    color: var(--cds-text-secondary);
    margin: var(--cds-spacing-04) 0 var(--cds-spacing-02);
}
.modal-carbon__content label:first-child {
    margin-top: 0;
}
.modal-carbon__content select,
.modal-carbon__content input[type="text"],
.modal-carbon__content input[type="number"],
.modal-carbon__content textarea {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--cds-field-01);
    border: none;
    border-bottom: 1px solid var(--cds-border-strong-01);
    color: var(--cds-text-primary);
    box-sizing: border-box;
}
.modal-carbon__content select:focus,
.modal-carbon__content input:focus,
.modal-carbon__content textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--cds-interactive-01);
}
.modal-carbon__content textarea {
    min-height: 100px;
    resize: vertical;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--cds-spacing-04);
}

.form-label {
    display: block;
    font-size: 12px;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-02);
}

.form-input, .form-select {
    width: 100%;
    padding: var(--cds-spacing-03);
    border: 1px solid var(--cds-gray-50);
    background: white;
    font-size: 14px;
    color: var(--cds-text-primary);
}

.form-input:focus, .form-select:focus {
    outline: 2px solid var(--cds-purple-60);
    outline-offset: -2px;
    border-color: var(--cds-purple-60);
}

.form-row {
    display: flex;
    gap: var(--cds-spacing-03);
}

.form-row .form-input {
    flex: 1;
}

/* ============================================
   STAT TILES GRID
   ============================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--cds-spacing-05);
    max-width: 800px;
}

.stat-tile {
    background: var(--cds-layer-01);
    border-radius: 8px;
    padding: var(--cds-spacing-05);
    text-align: center;
    transition: box-shadow 0.15s;
}

.stat-tile:hover {
    box-shadow: var(--cds-shadow-card-hover);
}

.stat-tile__icon {
    font-size: 2rem;
    color: var(--cds-icon-secondary);
    margin-bottom: var(--cds-spacing-03);
    display: block;
}

.stat-tile__label {
    font-size: 14px;
    color: var(--cds-text-primary);
}

.stat-tile a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-carbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cds-spacing-03);
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    border-radius: 0;
    transition: all 0.15s;
    min-height: 48px;
    text-decoration: none;
}

.btn-carbon svg {
    width: 16px;
    height: 16px;
}

.btn-carbon--sm {
    padding: 7px 12px;
    min-height: 32px;
    font-size: 12px;
}

.btn-carbon--primary {
    background: var(--cds-button-primary);
    color: white;
}

.btn-carbon--primary:hover {
    background: var(--cds-button-primary-hover);
}

.btn-carbon--primary:disabled {
    background: var(--cds-button-disabled);
    color: var(--cds-text-on-color-disabled);
    cursor: not-allowed;
}

.btn-carbon--secondary {
    background: var(--cds-button-secondary);
    color: white;
}

.btn-carbon--secondary:hover {
    background: var(--cds-button-secondary-hover);
}

.btn-carbon--tertiary {
    background: white;
    color: var(--cds-button-tertiary);
    border: 1px solid var(--cds-button-tertiary);
}

.btn-carbon--tertiary:hover {
    background: var(--cds-button-tertiary);
    color: white;
}

.btn-carbon--ghost {
    background: transparent;
    color: var(--cds-link-primary);
}

.btn-carbon--ghost:hover {
    background: var(--cds-layer-hover-01);
}

.btn-carbon--danger {
    background: var(--cds-button-danger);
    color: white;
}
.btn-carbon--danger:hover {
    background: var(--cds-button-danger-hover);
}
.btn-carbon--danger-tertiary {
    background: white;
    color: var(--cds-support-error);
    border: 1px solid var(--cds-support-error);
}
.btn-carbon--danger-tertiary:hover {
    background: var(--cds-support-error);
    color: white;
}
.btn-carbon--danger-ghost {
    background: transparent;
    color: var(--cds-support-error);
    border: none;
}
.btn-carbon--danger-ghost:hover {
    background: var(--cds-red-10);
}
.btn-carbon--success {
    background: var(--cds-green-60);
    color: white;
}
.btn-carbon--success:hover {
    background: var(--cds-green-70);
}
.btn-carbon--danger-tertiary-soft {
    background: white;
    color: var(--cds-support-error);
    border: 1px solid var(--cds-support-error);
}
.btn-carbon--danger-tertiary-soft:hover {
    background: var(--cds-red-10);
}
.btn-carbon--tertiary-neutral {
    background: white;
    color: var(--cds-text-primary);
    border: 1px solid var(--cds-text-primary);
}
.btn-carbon--tertiary-neutral:hover {
    background: var(--cds-layer-hover-01);
}

/* Back Link - generisch für alle Kontexte */
.back-link {
    color: var(--cds-purple-40);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.back-link:hover {
    text-decoration: underline;
}
.back-link i {
    margin-right: 4px;
}

/* Back Link in hellem Kontext */
.header-light .back-link,
.content-area .back-link,
.stat-tools .back-link,
.attendance-tools .back-link {
    color: var(--cds-purple-60);
}

/* w-100 utility */
.w-100 {
    width: 100%;
}

/* ============================================
   FILTER CARD (Reusable filter panel)
   ============================================ */
.filter-card {
    background: linear-gradient(135deg, var(--cds-purple-10, #f6f2ff) 0%, var(--cds-layer-01, white) 100%);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    border-top: 3px solid var(--cds-purple-60, #8a3ffc);
    margin-bottom: 24px;
}

.filter-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid var(--cds-border-strong-01, #8d8d8d);
    border-radius: 4px;
    font-size: 14px;
    background: var(--cds-field-02, #ffffff);
}

/* ============================================
   HIDDEN UTILITY
   ============================================ */
.hidden {
    display: none !important;
}