/**
 * 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: 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: 20px;
}

.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;
}

.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;*/
}

.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: 2;
}

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

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

.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;
}

.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(--step-color);
  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(--step-color);
  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(--success);
}

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

.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(--success);
}

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

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

.benefit-tab-grid .subject-cards-group--modern .subject-card .subject-card-actions {
  --subject-step-accent: var(--step-color);
  --subject-step-accent-bg: color-mix(in srgb, var(--step-color) 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;
}