.select-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #f7f9fa;
  border: 1px solid #d3dadb;
  border-radius: 4px;
  font-size: 16px;
  color: var(--tep-default);
  padding: 0;
}

.select-dropdown .inner-text {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
}

.select-dropdown:disabled {
  opacity: 50%;
}

.select-dropdown[data-values=''] .inner-text {
  color: var(--tep-gray-600);
}

.select-dropdown.xs {
  width: 91px;
}

.select-dropdown.sm {
  width: 121px;
}

.select-dropdown.md {
  width: 181px;
}

.select-dropdown.lg {
  width: 250px;
}

.select-dropdown .chevron::before {
  font: var(--fa-font-regular);
  font-size: 12px;
  content: '\f078';
  float: right;
  text-align: right;
  align-content: center;
  padding-right: 6px;
}

.select-dropdown + .dropdown-menu .clear-btn {
  width: 100%;
  background-color: var(--tep-blue);
  color: white;
  border-radius: 4px;
  border: none;
  height: 24px;
  margin-bottom: 0;
  margin-top: 0.5rem;
  padding: 0;
  transition: all 0 ease-in-out;
}

/* .select-dropdown.xs+.dropdown-menu {
    min-width: 91px;
    max-width: 91px;
} */

.select-dropdown.sm + .dropdown-menu {
  width: 121px;
}

.select-dropdown.md + .dropdown-menu {
  width: 181px;
}

.select-dropdown.lg + .dropdown-menu {
  width: 250px;
}

.select-dropdown + .dropdown-menu .select-dropdown-list {
  max-height: 200px;
  margin-bottom: 0;
  overflow-y: auto;
}

.select-dropdown + .dropdown-menu .select-dropdown-item {
  padding: 8px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  color: var(--tep-default);
}

.select-dropdown + .dropdown-menu .select-dropdown-item .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 2px solid #c9d3d6;
  color: white;
}

.select-dropdown.default-items[data-values=''] + .dropdown-menu .select-dropdown-item .checkbox {
  background: #c9d3d6;
  border: 2px solid #c9d3d6;
}

.select-dropdown + .dropdown-menu .select-dropdown-item.active .checkbox {
  background: var(--tep-blue);
  border: 2px solid var(--tep-blue);
}

.select-dropdown + .dropdown-menu .select-dropdown-item.active .checkbox::before,
.select-dropdown + .dropdown-menu .select-dropdown-item.default .checkbox::before {
  font: var(--fa-font-regular);
  content: '\f00c';
  font-size: 10px;
}

.select-dropdown + .dropdown-menu .select-dropdown-item:hover,
.select-dropdown + .dropdown-menu .select-dropdown-item.active {
  background-color: var(--bs-tertiary-bg);
}

.select-dropdown + .dropdown-menu .select-dropdown-item:active {
  background-color: var(--tep-gray-200);
}

/* .select-dropdown:focus, .select-dropdown.show {
    transition: all 0.25s ease-in-out;
    outline: solid var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
} */

/* .profile-header {
    font
} */

.tep-label {
  font-size: 14px;
  font-weight: 500;
}

.tep-details {
  font-size: 14px;
}

.date-picker-dropdown.sm {
  width: 121px;
}

.date-picker-dropdown.lg {
  width: 200px;
}

.date-picker-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #f7f9fa;
  border: 1px solid #d3dadb;
  border-radius: 4px;
  font-size: 16px;
  color: var(--tep-default);
  padding: 0;
}

.date-picker-dropdown .calendar::before {
  font: var(--fa-font-regular);
  font-size: 12px;
  content: '\f073';
  float: right;
  text-align: right;
  align-content: center;
  padding-right: 6px;
}

.date-picker-dropdown .inner-text {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
}

/* .date-picker-dropdown+.dropdown-menu {
    width: 200px;
} */

.cal-head-left-btn::before {
  font: var(--fa-font-regular);
  font-size: 16px;
  content: '\f060';
}

.cal-head-right-btn::before {
  font: var(--fa-font-regular);
  font-size: 16px;
  content: '\f061';
}

.cal-head-left-btn,
.cal-head-right-btn {
  min-width: 40px;
  height: 40px;
  border: 1px solid #d3dadb;
  background-color: #f7f9fa;
  border-radius: 4px;
  font-size: 16px;
  color: var(--tep-default);
}

.cal-head-month-btn {
  height: 40px;
  width: 100%;
  border: 1px solid #d3dadb;
  border-radius: 4px;
  background-color: #f7f9fa;
  font-size: 16px;
  color: var(--tep-default);
}

.date-picker-dropdown + .dropdown-menu th {
  font-weight: 500;
}

.date-picker-dropdown + .dropdown-menu th,
.date-picker-dropdown + .dropdown-menu td {
  width: 30px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  align-content: center;
  border-radius: 4px;
}

.date-picker-dropdown + .dropdown-menu td {
  cursor: pointer;
}

.date-picker-dropdown + .dropdown-menu td.today {
  color: var(--tep-blue);
  font-weight: 500;
}

.date-picker-dropdown + .dropdown-menu td:not(.current) {
  pointer-events: none;
  opacity: 50%;
}

.date-picker-dropdown + .dropdown-menu td:hover {
  background-color: var(--tep-blue);
  color: white;
  font-weight: 500;
}

.date-picker-dropdown[data-value=''] .inner-text {
  color: var(--tep-gray-600);
}

.subject-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  background-color: #f7f9fa;
  border: 1px solid #d3dadb;
  border-radius: 4px;
  font-size: 14px;
  color: var(--tep-default);
  padding: 0;
}

.subject-dropdown .inner-text {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
}

.subject-dropdown[data-values=''] .inner-text {
  color: var(--tep-gray-600);
}

.subject-dropdown .chevron::before {
  font: var(--fa-font-regular);
  font-size: 12px;
  content: '\f078';
  float: right;
  text-align: right;
  align-content: center;
  padding-right: 6px;
}

.subject-dropdown-container {
  min-width: 180px;
}

.color-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #f7f9fa;
  border: 1px solid #d3dadb;
  border-radius: 4px;
  font-size: 16px;
  color: var(--tep-default);
  padding: 0;
}

.color-dropdown .inner-text {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
}

.color-dropdown:disabled {
  opacity: 50%;
}

.color-dropdown[data-value=''] .inner-text {
  color: var(--tep-gray-600);
}

.color-dropdown.xs {
  width: 91px;
}

.color-dropdown.sm {
  width: 121px;
}

.color-dropdown.md {
  width: 181px;
}

.color-dropdown.lg {
  width: 250px;
}

.color-dropdown .chevron::before {
  font: var(--fa-font-regular);
  font-size: 12px;
  content: '\f078';
  float: right;
  text-align: right;
  align-content: center;
  padding-right: 6px;
}

.color-dropdown + .dropdown-menu .color-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0.25rem;
  width: 210px;
}

.color-dropdown + .dropdown-menu .color-list-item {
  display: flex;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  align-items: center;
  justify-content: center;
}

.color-list-item-color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

.color-dropdown + .dropdown-menu .color-list-item-color:hover {
  transform: scale(1.1);
}

.color-dropdown + .dropdown-menu .color-list-item-color.selected::before {
  font: var(--fa-font-regular);
  font-size: 16px;
  content: '\f00c';
}

.profile-component {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem;
  border-radius: 50rem;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  width: fit-content;
}

.profile-component:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
}

.profile-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 50rem;
  pointer-events: none;
}

.profile-pic-text {
  text-align: center;
  font-family: 'Museo';
  color: var(--bs-white);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.profile-pic-name {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}

.profile-component-sm .profile-pic,
.profile-component-sm .user-img.sm {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.profile-component-md .profile-pic,
.profile-component-md .user-img {
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
}

.profile-component-lg .profile-pic,
.profile-component-lg .user-img {
  min-width: 96px;
  min-height: 96px;
  max-width: 96px;
  max-height: 96px;
}

.profile-component-sm .profile-pic-text {
  font-size: 0.75rem;
}

.profile-component-sm .profile-pic-name {
  font-size: 0.875rem;
}

.profile-component-md .profile-pic-text {
  font-size: 1.25rem;
}

.profile-component-md .profile-pic-name {
  font-size: 1.5rem;
}

.profile-component-lg .profile-pic-text,
.profile-component-lg .profile-pic-name {
  font-size: 2rem;
}

.ef-component {
  font-size: 1.25rem;
  color: var(--bs-danger-border-subtle);
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-danger-border-subtle);
  border-radius: 50%;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-body-bg);
}

.ef-component[data-skill='metacognition']::before {
  font: var(--fa-font-light);
  content: '\f0eb';
}

.ef-component[data-skill='organization']::before {
  font: var(--fa-font-light);
  content: '\f5d4';
}

.ef-component[data-skill='timeManagement']::before {
  font: var(--fa-font-light);
  content: '\f251';
}

.ef-component[data-skill='emotionalControl']::before {
  font: var(--fa-font-light);
  content: '\f004';
}

.ef-component[data-skill='responseInhibition']::before {
  font: var(--fa-font-light);
  content: '\f675';
}

.ef-component[data-skill='flexibility']::before {
  font: var(--fa-font-light);
  content: '\e356';
}

.ef-component[data-skill='taskInitiation']::before {
  font: var(--fa-font-light);
  content: '\e131';
}

.ef-component[data-skill='attention']::before {
  font: var(--fa-font-light);
  content: '\f013';
}

.ef-component[data-skill='workingMemory']::before {
  font: var(--fa-font-light);
  content: '\f03a';
}

.ef-component[data-skill='persistence']::before {
  font: var(--fa-font-light);
  content: '\f648';
}

.ef-component[data-skill='planning']::before {
  font: var(--fa-font-light);
  content: '\e0d2';
}

.ef-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ef-growth-meter {
  overflow: hidden;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  margin: 0.25rem 0;
  display: flex;
  flex-grow: 1;
}

.ef-identifier.grow::before {
  font: var(--fa-font-light);
  content: '\f4d8';
  color: var(--bs-green);
}

.ef-identifier.glow::before {
  font: var(--fa-font-light);
  content: '\f185';
  color: var(--bs-yellow);
}

.ef-glows-label::before {
  font: var(--fa-font-light);
  content: '\f185';
  padding-right: 0.5rem;
}

.ef-grows-label::before {
  font: var(--fa-font-light);
  content: '\f4d8';
  padding-right: 0.5rem;
}

.ef-identifier {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  font-size: 1.125rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-bg);
}

.ef-growth-segment {
  width: 32px;
  margin: 0.125rem 0;
}

.ef-growth-segment.filled {
  background-color: var(--bs-success-border-subtle);
  /* margin: 0.125rem 0; */
}

.ef-growth-segment.filled:first-child {
  margin-left: 0.125rem;
  border-radius: 0.25rem 0 0 0.25rem;
}

.ef-growth-segment:not(:last-child) {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.ef-growth-segment.filled:last-child,
.ef-growth-segment.filled:has(+ :not(.filled)) {
  margin-right: 0.125rem;
  border-radius: 0 0.25rem 0.25rem 0;
  border: none;
}

.ef-growth-segment.filled:first-child:has(+ :not(.filled)) {
  margin: 0.125rem;
  border-radius: 0.25rem;
}

.exam-section-score-component {
  border-radius: 0.25rem;
  color: var(--bs-body-color);
  height: 36px;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  position: relative;
  overflow: hidden;
  background-color: var(--bs-secondary-bg);
}

.exam-section-score-component.increasing {
  /* color: var(--bs-white); */
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-success-border-subtle);
  background-color: var(--bs-success-bg-subtle);
}

.exam-section-score-component.decreasing {
  /* color: var(--bs-white); */
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-danger-border-subtle);
  background-color: var(--bs-danger-bg-subtle);
}

.exam-section-score-component.empty {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.exam-section-score-component[data-comment] {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
}

.exam-section-score-component[data-comment]::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent var(--bs-primary) transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

.grade-component {
  border-radius: 0.25rem;
  color: var(--bs-white);
  height: 36px;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: var(--bs-border-width);
  border-style: var(--bs-border-style);
  position: relative;
  overflow: hidden;
}

.grade-component.empty {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.grade-component[data-comment] {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
}

.grade-component[data-comment]::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent var(--bs-primary) transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

.grade-component:not([data-value]) {
  color: var(--bs-body-color);
}

.radial-wrap {
  width: 64px;
  height: 64px;
  background: conic-gradient(var(--tep-teal) calc(var(--value) * 1%), #e9ecef 0);
}

.radial-text {
  font-size: 1rem;
  z-index: 2;
}

.radial-hole {
  width: 70%;
  height: 70%;
  z-index: 1;
}

/* Scorecard Board Styles */
.scorecard-board-container {
  overflow-x: auto; /* Enable horizontal scrolling for the board */
  overflow-y: auto; /* Enable vertical scrolling for sticky header */
  padding: 0.5rem;
  background-color: var(--bs-body-bg); /* Match background */
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-radius: 0.5rem;
  margin-top: 1rem; /* Add some space */
}

.scorecard-board {
  display: flex;
  flex-direction: column;
  width: fit-content; /* Allow board to expand horizontally */
  min-width: 100%;
}

.board-row,
.board-header-row {
  display: flex;
  flex-direction: row;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.board-section-group:last-child .board-row:last-child {
  border-bottom: none; /* Remove bottom border on very last row */
}

.board-cell {
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px; /* Adjust as needed for week columns */
  max-width: 120px;
  flex-shrink: 0;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.board-cell:last-child {
  border-right: none;
}

/* Header Row Styles */
.board-header-row {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
  position: sticky;
  top: 0; /* Make header row sticky */
  z-index: 2;
}

.header-metric-info,
.metric-info-cell {
  min-width: 250px; /* Wider column for metric info */
  max-width: 250px;
  justify-content: flex-start;
  text-align: left;
  position: sticky;
  left: 0; /* Make first column sticky */
  background-color: var(--bs-tertiary-bg); /* Match header or row background */
  z-index: 1;
  border-right-width: 2px; /* Emphasize sticky column border */
}

.board-header-row .header-metric-info {
  background-color: var(--bs-tertiary-bg); /* Ensure sticky header cell matches header bg */
}

.metric-row .metric-info-cell {
  background-color: var(--bs-body-bg); /* Ensure sticky metric cell matches row bg */
}

.metric-row:hover .metric-info-cell {
  background-color: var(--bs-light); /* Optional: Highlight sticky cell on row hover */
}

.header-week {
  font-size: 0.8rem;
}

/* Section Header Row Styles */
.section-header-row {
  background-color: var(--bs-secondary-bg);
  font-weight: 600;
}
.section-title-cell {
  justify-content: flex-start;
  text-align: left;
  background-color: var(--bs-secondary-bg); /* Match row background */
  /* Make avatar align nicely */
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
/* Adjust avatar size within cell */
.section-title-cell .profile-component-sm .profile-pic {
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}
.section-title-cell .profile-component-sm .profile-pic-text {
  font-size: 0.7rem;
}

.section-header-row .board-cell:not(.section-title-cell) {
  /* Make non-title cells in section header effectively invisible */
  border-right: none;
  background-color: var(--bs-secondary-bg); /* Match row background */
}

/* Metric Row Styles */
.metric-row:hover {
  background-color: var(--bs-light); /* Optional: Row hover effect */
}

.metric-info-cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
  white-space: normal; /* Allow metric title to wrap */
}

.metric-title {
  font-weight: 500;
}

.metric-goal {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* Week Cell Styles */
.week-cell .week-value {
  font-weight: 500;
}

.week-current {
  /* Highlight current week */
  border-left: 2px solid var(--bs-primary);
  border-right: 2px solid var(--bs-primary);
  /* background-color: var(--bs-primary-bg-subtle); */ /* Optional background */
  font-weight: bold;
}
.board-header-row .week-current {
  color: var(--bs-primary-text-emphasis);
}

.week-future {
  background-color: var(--bs-tertiary-bg); /* Slightly different background for future */
  color: var(--bs-secondary-color);
}
.week-future .week-value {
  color: var(--bs-tertiary-color); /* Mute future values */
}

/* Goal Status Styles */
.goal-met .week-value {
  color: var(--bs-success-text-emphasis);
}
.goal-met {
  background-color: var(--bs-success-bg-subtle); /* Subtle background for met goals */
}

.goal-missed .week-value {
  color: var(--bs-danger-text-emphasis);
}
.goal-missed {
  background-color: var(--bs-danger-bg-subtle); /* Subtle background for missed goals */
}