/* Compatibiliteitslaag voor de opgesplitste stylesheet.
   Houdt de huidige dashboard-HTML werkend zonder de importstructuur opnieuw om te gooien. */

.period-btn {
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    border: 1px solid var(--border);
    color: var(--t2);
    padding: 9px 12px;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}

.period-btn:hover {
    color: var(--t1);
    border-color: var(--border-3);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
}

.period-btn:active {
    transform: translateY(1px);
}

.period-btn.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, #ffffff 18%), color-mix(in srgb, var(--blue) 68%, var(--surface-3)));
    color: #07111f;
    border-color: color-mix(in srgb, var(--blue) 56%, #ffffff 44%);
}

.period-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.hero-header {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 0;
    column-gap: 0;
}

.profile-text {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    grid-column: 2;
}

.profile-cluster {
    display: contents;
}

.profile-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    grid-column: 1;
    justify-self: start;
}

.profile-avatar {
    width: 152px;
    height: 152px;
    border-radius: 24px;
    border: 2px solid color-mix(in srgb, var(--blue) 34%, var(--border));
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.36);
    object-fit: cover;
}

.profile-identity h1 {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--t1);
    line-height: 1.2;
    max-width: 168px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-inline-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: end;
    margin-right: 0;
}

.hero-inline-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 116px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.hero-inline-key {
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t3);
    font-weight: 800;
}

.hero-inline-stat strong {
    color: var(--t1);
    font-size: .86rem;
}

.hero-actions {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-self: stretch;
    z-index: 1;
    padding-bottom: 0;
    margin-left: -1px;
    flex-shrink: 0;
    grid-column: 3;
}

.hero-actions-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: min(204px, 100%);
}

/* Stats + acties als één visueel blok */
.hero-inline-stats,
.hero-actions-row {
    padding: 6px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    height: 100%;
    box-sizing: border-box;
}

.hero-inline-stats {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.hero-actions-row {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-2) 90%, transparent);
    background: color-mix(in srgb, var(--surface-2) 76%, transparent);
    color: var(--t1);
    text-decoration: none;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease, color .15s ease;
    width: 100%;
}

.header-action-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 42%, transparent);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
}

.header-donate-btn,
.header-theme-btn {
    color: var(--t1);
    border-color: color-mix(in srgb, var(--border-2) 90%, transparent);
}

.theme-btn-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.theme-btn-dots::before,
.theme-btn-dots::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.theme-btn-dots::before {
    background: var(--blue);
}

.theme-btn-dots::after {
    background: var(--purple);
}

.header-dropdown {
    position: relative;
    width: 100%;
}

.header-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--sh-md);
    z-index: 30;
}

.header-dropdown-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--t1);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    width: 100%;
}

.header-dropdown-link:hover {
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.sidebar {
    gap: 18px;
}

.stat-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stat-unit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distribution-box,
.ai-insight-box,
.creator-widget,
.log-panel,
.subject-hours-item,
.insight-card,
.period-weight-row,
.class-panel,
.sync-overview-card,
.report-setup-summary-card,
.report-impact-row {
    border-radius: 18px;
}

.distribution-box,
.ai-insight-box,
.creator-widget,
.subject-hours-item,
.insight-card,
.sync-overview-card,
.report-setup-summary-card,
.report-impact-row,
.school-weighting-setup,
.report-setup-section,
.class-panel,
#classmates-list-section,
#class-comparison-section {
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.distribution-box,
.ai-insight-box,
.creator-widget,
.log-panel {
    padding: 14px;
}

.distribution-scale,
.ai-final-row,
.goal-label,
.goal-percent,
.goal-separator,
.period-note,
.creator-text,
.lesson-duration-hint,
.period-weights-request-note {
    color: var(--t2);
}

.stat-unit-spaced {
    margin-top: 6px;
}

.stat-label-small,
.stat-label-ai,
.insight-name {
    font-size: .62rem;
}

.weighted-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--blue) 36%, transparent);
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    color: color-mix(in srgb, var(--blue) 80%, #ffffff 20%);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subject-hours-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.subject-hours-empty {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
    color: var(--t3);
    font-size: .7rem;
}

.subject-hours-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 10px;
    padding: 10px 12px;
}

.subject-hours-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.subject-hours-name {
    display: block;
    font-size: .72rem;
    color: var(--t1);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subject-hours-meta {
    display: block;
    font-size: .64rem;
    color: var(--t3);
    margin-top: 2px;
}

.subject-hours-item input,
#target-percent,
#bulk-score,
#bulk-max,
.whatif-input,
.whatif-max-input,
.period-weight-row input,
.lesson-duration-row input,
.class-code-textarea,
.report-input,
.report-setup-subject-hours,
#report-setup-lesson-duration {
    width: 100%;
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-2) 88%, transparent);
    border-radius: 12px;
    color: var(--t1);
    font: inherit;
    padding: 9px 12px;
    outline: none;
}

.subject-hours-item input:focus,
#target-percent:focus,
#bulk-score:focus,
#bulk-max:focus,
.whatif-input:focus,
.whatif-max-input:focus,
.period-weight-row input:focus,
.lesson-duration-row input:focus,
.class-code-textarea:focus,
.report-input:focus,
.report-setup-subject-hours:focus,
#report-setup-lesson-duration:focus {
    border-color: color-mix(in srgb, var(--blue) 46%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.insight-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.insight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.insight-card i {
    font-size: .9rem;
    min-width: 18px;
    text-align: center;
}

.insight-value,
.creator-name {
    color: var(--t1);
    font-weight: 700;
}

.creator-widget-about {
    padding: 16px;
}

.creator-widget-main {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface-3) 82%, transparent));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Zorg dat de tabs niet visueel in hetzelfde vakje lijken te zitten */
.creator-widget-main+.view-tab-bar {
    margin-top: 0;
}

.creator-about-layout {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.creator-about-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.creator-socials {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.creator-socials a {
    color: var(--blue-2);
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
}

.log-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.log-panel-actions {
    display: flex;
    gap: 8px;
}

.icon-btn-small {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    color: var(--t2);
    cursor: pointer;
}

.board-header {
    gap: 14px;
    align-items: flex-end;
}

#sync-status {
    font-size: .74rem;
    color: var(--t2);
    margin-top: 4px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

select.search-box {
    color: var(--t2);
    min-width: 180px;
}

.goal-bar {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface-3) 82%, transparent));
}

/* ── Periode-widget: alles op één lijn ── */
.goal-bar-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.goal-bar-layout .goal-bar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
    white-space: nowrap;
}

.goal-bar-layout .goal-bar-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.goal-bar-layout .period-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.goal-bar-layout #open-period-weights-menu-btn {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    width: auto;
}
/* ── Einde Periode-widget overrides ── */

.goal-bar-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.goal-bar-title i {
    margin-top: 2px;
    color: var(--blue-2);
}

.goal-bar-title span {
    display: block;
    color: var(--t1);
    font-size: .92rem;
    font-weight: 800;
}

.goal-subtitle {
    margin: 4px 0 0;
    color: var(--t2);
    font-size: .74rem;
    line-height: 1.45;
}

.goal-bar-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.goal-control-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

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

.goal-inline-fields-score {
    justify-content: flex-start;
}

.goal-inline-fields #target-percent {
    width: 84px;
}

.goal-inline-fields-score #bulk-score,
.goal-inline-fields-score #bulk-max {
    width: 74px;
}

.goal-result-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
}

.goal-result-wrap[data-status="success"] {
    border-color: rgba(72, 215, 168, 0.45);
    background: rgba(72, 215, 168, 0.10);
}

.goal-result-wrap[data-status="warning"] {
    border-color: rgba(255, 209, 102, 0.45);
    background: rgba(255, 209, 102, 0.10);
}

.goal-result-wrap[data-status="danger"] {
    border-color: rgba(255, 127, 150, 0.45);
    background: rgba(255, 127, 150, 0.10);
}

.goal-result-label {
    color: var(--t3);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#goal-result {
    color: var(--t1);
    font-size: .86rem;
    font-weight: 800;
}

#goal-result[data-status="success"] {
    color: #a9f5d8;
}

#goal-result[data-status="warning"] {
    color: #ffe6b6;
}

#goal-result[data-status="danger"] {
    color: #ffd0da;
}

#goal-result[data-status="neutral"] {
    color: var(--t2);
}

.goal-actions-group .period-btn,
.goal-bulk-group .period-btn {
    width: 100%;
}

.subject-card.active {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--surface-3) 94%, transparent);
}

.subject-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.subject-icon-box,
.modal-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
}

.subject-name-tag {
    min-width: 0;
}

.subject-name-tag p,
.whatif-impact span,
.eval-percent,
.modal-subtitle,
.report-setup-subject-meta,
.report-impact-meta,
.class-panel-desc,
#class-table-hint,
#import-result,
.review-popup-body,
.missing-hours-text {
    color: var(--t2);
}

.subject-name-tag p,
.whatif-impact,
.score-trend,
.eval-percent,
#import-result {
    font-size: .7rem;
}

.whatif-impact {
    margin-top: 4px;
}

.score-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.score-trend.trend-up {
    color: #6ee7b7;
}

.score-trend.trend-down {
    color: #fca5a5;
}

.score-trend.trend-flat {
    color: var(--t3);
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.priority-critical {
    color: #ffe3ea;
    background: rgba(255, 127, 150, 0.12);
    border: 1px solid rgba(255, 127, 150, 0.24);
}

.priority-warning {
    color: #ffe6bf;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.24);
}

.hours-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    color: var(--t2);
    background: color-mix(in srgb, var(--surface-3) 90%, transparent);
    border: 1px solid var(--border);
}

.drawer {
    padding: 0 20px 20px;
    border-top: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}

.mini-progress,
.modal-progress,
.eval-bar-track,
.ctable-bar {
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-3) 82%, transparent);
}

.mini-progress,
.modal-progress {
    height: 6px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.mini-fill,
.modal-progress-fill,
.eval-bar-fill,
.ctable-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue-2) 65%, #ffffff 35%));
    border-radius: inherit;
}

.whatif-row,
.modal-whatif-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.whatif-label,
.whatif-sep,
.whatif-max,
.modal-section-label,
.class-section-title,
.report-setup-eyebrow,
.sync-overview-label,
.period-report-slabel {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t3);
}

.whatif-total,
.modal-whatif-total {
    font-size: .74rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 14px;
}

.eval-grid {
    gap: 10px;
}

.eval-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eval-card-header,
.eval-footer,
.modal-header,
.sync-overview-head,
.report-impact-head,
.report-setup-popup-head,
.missing-hours-popup-head,
.ideas-modal-header,
.period-report-header,
.review-popup-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.eval-title {
    font-size: .72rem;
    color: var(--t2);
    line-height: 1.4;
}

.eval-score,
.ctable-pct,
.modal-score-badge {
    font-weight: 800;
    color: var(--t1);
}

.eval-period-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--t2);
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.elite-panel,
.sync-overview-panel,
.report-setup-panel,
.report-impact-panel,
.report-setup-popup-inner,
.missing-hours-popup-inner,
.period-report-modal,
.ideas-modal,
.subject-modal,
.review-popup-inner {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: var(--sh-md);
}

.sync-overview-panel,
.period-weights-config {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 24px;
}

.sync-overview-head p,
.report-impact-head p,
.report-setup-copy p,
.report-setup-section-text,
.period-report-text,
.ideas-body-text {
    margin-top: 6px;
    color: var(--t2);
    line-height: 1.55;
}

.sync-overview-grid,
.report-setup-summary,
.report-setup-subject-picker,
.report-setup-subject-list {
    display: grid;
    gap: 12px;
}

.sync-overview-grid,
.report-setup-summary {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 16px;
}

.sync-overview-card,
.report-setup-summary-card {
    padding: 14px;
}

.sync-overview-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
}

.sync-overview-card strong,
.report-setup-summary-card strong,
.report-impact-share strong,
.period-report-title,
.ideas-modal-title,
.review-popup-title,
.missing-hours-popup-head h3,
.modal-title {
    color: var(--t1);
}

.sync-overview-card strong {
    font-size: .95rem;
    line-height: 1.35;
}

.sync-overview-card p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--t2);
}

.period-weights-config[aria-hidden="true"] {
    display: none;
}

.period-weights-config.open {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 9400;
}

.period-weights-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9390;
    background: rgba(4, 8, 16, 0.66);
    backdrop-filter: blur(5px);
}

.period-weights-head,
.period-weights-head-actions,
.period-weights-toggle,
.period-weights-actions,
.sync-overview-actions,
.report-setup-actions,
.report-setup-popup-actions,
.missing-hours-actions,
.period-report-actions,
.class-import-actions,
.class-code-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sync-overview-actions {
    justify-content: flex-end;
}

.sync-overview-actions .period-btn {
    white-space: nowrap;
}

.period-weights-close,
.review-popup-dismiss,
.missing-hours-close,
.modal-close,
.tp-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    color: var(--t2);
    cursor: pointer;
}

.period-weights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.period-weight-row,
.lesson-duration-row,
.report-setup-subject-row,
.class-avatar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.lesson-duration-row,
.report-setup-slider-row,
.report-setup-mini-row {
    margin-top: 6px;
}

.period-weights-total,
.period-weights-status,
.period-weights-warning,
.report-setup-inline-status,
.report-setup-progress-card,
.report-impact-mode,
.report-label-chip,
.report-status,
.report-label-loading,
.report-label-empty {
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 84%, transparent);
}

.period-weights-status-info,
.report-status-info,
.report-label-loading,
.report-label-empty,
.report-impact-empty {
    color: var(--t2);
}

.period-weights-warning {
    color: #ffe2a8;
    border-color: rgba(255, 209, 102, 0.26);
    background: rgba(255, 209, 102, 0.10);
}

.report-impact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.report-impact-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
}

.report-impact-main {
    min-width: 0;
}

.report-impact-subject {
    font-size: .86rem;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 6px;
}

.report-impact-share {
    text-align: right;
    min-width: 92px;
}

.report-impact-share span,
.class-avatar-toggle-hint,
.period-report-hint {
    font-size: .7rem;
    color: var(--t3);
}

.class-avatar-toggle {
    justify-content: flex-start;
}

.class-avatar-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.classmate-chip-avatar-placeholder,
.ctable-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-3) 92%, transparent);
    color: var(--t1);
    border: 1px solid var(--border);
    font-weight: 800;
}

.classmate-chip-avatar-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: .65rem;
}

.ctable-avatar,
.ctable-avatar-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    flex-shrink: 0;
    object-fit: cover;
}

.ctable-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctable-student-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--t1);
}

.ctable-avg,
.ctable-raw,
.ctable-td-empty {
    color: var(--t2);
    font-size: .68rem;
}

.ctable-me-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .55rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--blue) 36%, transparent);
}

.ctable-tr-me,
.ctable-tr-me td {
    background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
}

#classmates-list-section,
#class-comparison-section {
    padding: 14px;
}

#class-table-hint {
    margin: 8px 0 12px;
}

.dashboard-footer {
    width: min(1680px, 100%);
    margin: 12px auto 0;
    padding: 14px 4px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--t3);
    font-size: .74rem;
}

.footer-ideas-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    color: var(--t2);
    cursor: pointer;
}

.subject-modal-overlay,
.review-popup,
.missing-hours-popup,
.report-setup-popup,
.ideas-modal-overlay,
.period-report-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 6, 12, 0.78);
    backdrop-filter: blur(5px);
}

.subject-modal-overlay {
    z-index: 9000;
}

.ideas-modal-overlay {
    z-index: 9200;
}

.period-report-overlay {
    z-index: 9300;
}

.review-popup {
    z-index: 9500;
    align-items: flex-end;
    justify-content: flex-end;
    background: transparent;
}

.missing-hours-popup,
.report-setup-popup {
    z-index: 9600;
}

.subject-modal,
.period-report-modal,
.ideas-modal,
.missing-hours-popup-inner,
.report-setup-popup-inner {
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 26px;
}

.subject-modal {
    max-width: 820px;
}

.modal-header,
.period-report-header,
.ideas-modal-header,
.missing-hours-popup-head,
.report-setup-popup-head {
    padding: 20px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

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

.modal-body,
.period-report-body,
.ideas-modal-body,
.missing-hours-popup-inner,
.report-setup-popup-body {
    padding: 22px;
}

.modal-divider {
    height: 1px;
    background: color-mix(in srgb, var(--border) 90%, transparent);
    margin: 16px 0;
}

.review-popup-inner {
    width: min(340px, calc(100vw - 24px));
    padding: 18px;
    border-radius: 22px;
}

.review-popup-stars {
    color: #ffd166;
    letter-spacing: 2px;
    font-size: 1.05rem;
}

.review-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-btn-primary,
.review-btn-secondary,
.report-btn-primary,
.report-btn-secondary,
.ideas-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.review-btn-primary,
.report-btn-primary,
.ideas-send-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, #ffffff 18%), color-mix(in srgb, var(--blue) 68%, var(--surface-3)));
    border: 1px solid color-mix(in srgb, var(--blue) 46%, transparent);
    color: #07111f;
}

.review-btn-secondary,
.report-btn-secondary {
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    border: 1px solid var(--border);
    color: var(--t2);
}

.missing-hours-list,
.report-detected-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.missing-hours-chip,
.report-label-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    border: 1px solid var(--border);
    color: var(--t1);
    font-size: .72rem;
}

.report-setup-popup-inner {
    position: relative;
    padding: 0;
}

.report-setup-popup-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-setup-section,
.report-setup-progress-card {
    padding: 18px;
    border-radius: 18px;
}

.report-setup-section-title {
    color: var(--t1);
    font-size: .95rem;
    font-weight: 700;
}

.report-setup-tutorial-box {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-3) 82%, transparent);
    border: 1px solid var(--border);
}

.report-setup-tutorial-title {
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 8px;
}

.report-setup-steps {
    padding-left: 18px;
    color: var(--t2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-setup-subject-picker {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 14px;
}

.report-setup-subject-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    cursor: pointer;
}

.report-setup-subject-list {
    margin-top: 14px;
}

.report-setup-slider-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.report-setup-popup-actions {
    padding: 0 22px 22px;
}

.report-setup-progress-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 6, 12, 0.62);
    backdrop-filter: blur(4px);
    border-radius: inherit;
}

.report-setup-progress-card {
    width: min(360px, calc(100% - 32px));
    text-align: center;
}

.report-setup-progress-spinner {
    margin: 18px auto 0;
}

@media (max-width: 980px) {
    .goal-bar {
        grid-template-columns: 1fr;
    }

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

    .hero-header,
    .board-header,
    .sync-overview-head,
    .report-impact-head,
    .period-weights-head {
        flex-direction: column;
        align-items: stretch;
    }

    .period-weights-config.open {
        width: calc(100vw - 20px);
    }

    .period-weights-grid,
    .class-top-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .goal-bar-controls {
        grid-template-columns: 1fr;
    }

    .hero-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .profile-cluster {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .profile-text,
    .hero-actions,
    .profile-identity {
        grid-column: auto;
    }

    .hero-inline-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
    }

    .hero-header,
    .subject-modal,
    .period-report-modal,
    .ideas-modal,
    .missing-hours-popup-inner,
    .report-setup-popup-inner {
        width: 100%;
    }

    .profile-cluster,
    .hero-actions-row,
    .goal-bar-controls,
    .report-impact-row,
    .creator-about-layout {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-header,
    .profile-cluster,
    .hero-actions {
        align-items: stretch;
    }

    .review-popup {
        right: 12px;
        left: 12px;
        bottom: 12px;
    }

    .review-popup-inner {
        width: 100%;
    }

    .dashboard-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---- Extra visuele verfijning ---- */

/* Donatie-knop behoudt rode kleur */
.header-donate-btn {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
}

.header-donate-btn:hover {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.75) !important;
}

/* Instagram knop behoudt gradient kleur */
.header-insta-btn {
    color: #f472b6 !important;
    border-color: rgba(244, 114, 182, 0.45) !important;
}

/* Scroll-naar-top knop afgerond */
.scroll-top-btn {
    border-radius: 999px !important;
}

/* Sidebar dividers */
.sidebar-divider {
    margin: 4px 0;
    border-color: var(--border);
    opacity: 0.5;
}

/* Toets-item in modal */
.modal-eval-item {
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}