/* universal box-sizing for predictable layouts. margin/padding zeroing is
   deliberately left to Tailwind preflight - a universal padding reset wipes
   out DaisyUI component padding (badges, buttons, etc.) and forces ongoing
   whack-a-mole overrides like the .manage-panel rules below. */
* {
  box-sizing: border-box;
}

/* Ensure HTML hidden attribute always wins over Tailwind display utilities */
[hidden] {
  display: none !important;
}

/* ##################################### */
/* #### Removes spinners from input #### */
/* ####   number type (up & down)   #### */
/* ##################################### */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ##################################### */
/* ####   Up and down buttons for   #### */
/* ####       custom spinners       ####  */
/* ##################################### */
.input-spinner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;

  padding: 5px 0 5px 0;
}

.input-spinner {
  background-color: oklch(37.1% 0 0);
  border-radius: 50%;

  width: 15px;
  height: 15px;
  padding: 2px;

  transition: 0.3s;
}

.input-spinner:hover {
  transition: 0.3s;

  transform: scale(1.25);
  background-color: oklch(14.5% 0 0);
}

/* ##################################### */

body {
  min-height: 100vh;
  background-color: #ffffff;
  color: #111827;
  display: flex;
  flex-direction: column;
}

nav {
  background: rgb(231, 231, 231);
  box-shadow: 0 0 5px 0 black;
}

main {
  padding: 0;
  flex: 1 0 auto;
}

input,
textarea {
  background-color: rgb(241, 241, 241);
}

select {
  border: 1px solid oklch(87% 0 0);
  border-radius: 6px;
  padding-inline: calc(0.25rem * 3) !important; /* px-3 */
  height: 40px;
}

h1 {
  font-size: 1.65rem !important;
  text-align: center;
  margin-bottom: 25px !important;
}

h2 {
  font-size: 1.5rem !important;
}

h3 {
  font-size: 1.35rem !important;
}

h4 {
  font-size: 1.25rem !important;
}

p {
  font-size: 1rem;
}

a {
  text-decoration: none;
  color: #000000;
}

label {
  margin-left: 8px;
}

.nav-banner-link:hover {
  opacity: 0.75;
}

.banner {
  display: block;
  width: 100%;
  max-width: 300px;
}

form {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
}

.form-with-validation {
  margin: 0 auto;
  max-width: 450px;
  min-width: 300px;
}

.form-create-post {
  margin: 0 auto;
  max-width: 650px;
  min-width: 300px;
}

.btn-remove-x {
  font-size: 10px;
  background-color: oklch(63.7% 0.237 25.331);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin-left: 5px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.x-mark {
  clip-path: polygon(
    20% 0%,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );
  background-color: black;
  width: 10px;
  height: 10px;
}

input.input:focus {
  outline: none; /* remove default browser outline */
  border-color: #000000; /* border color on focus, e.g., pink-500 */
  box-shadow: 0 0 0 2px rgb(145, 145, 145); /* halo/glow color */
  transition:
    border-color 0.2s,
    box-shadow 0.2s; /* smooth animation */
}

.helptext {
  color: oklch(70.4% 0.191 22.216);
}

.helptext ul {
  list-style-position: inside;
  list-style-type: disc;
  margin: 0.5rem 0 0 0;
  padding-left: 0;
}

.errorlist {
  color: oklch(88.5% 0.062 18.334);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.errorlist li {
  opacity: 0;
  transform: translateY(-8px);
  animation: fadeSlideIn 1s ease forwards;
}

.errorlist li:nth-child(1) {
  animation-delay: 0.1s;
}
.errorlist li:nth-child(2) {
  animation-delay: 0.2s;
}
.errorlist li:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-message-popup {
  background-color: oklch(63.7% 0.237 25.331);
  border: 1px solid oklch(70.4% 0.191 22.216);
  padding: 3px;
  border-radius: 0.15cm;

  display: flex;
  gap: 5px;
}

.navbar {
  width: 100%;
  height: 50px;
}

.navbar a {
  height: inherit;
}

.nav-banner-image {
  height: inherit;
  width: auto;
}

.nav-banner-link {
  text-decoration: none; /* Removes default underline */
  color: #000;
  background: none;
  padding: 5px 10px; /* Add some padding for the line to have space */
}

.nav-banner-link::before {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  width: 0; /* Initial state: line is invisible */
  height: 2px; /* Thickness of the line */
  bottom: 0; /* Position at the bottom of the link */
  left: 0; /* Start position from the left */
  background-color: #880000; /* Color of the line */
  visibility: hidden; /* Hide the element initially */
  transition: all 0.3s ease-in-out; /* Smooth transition for the animation */
}

.nav-banner-link:hover::before {
  visibility: visible; /* Make the line visible on hover */
  width: 100%; /* Final state: line spans the full width */
}

/* For new post and btns */
.post-card {
  transition: transform 0.2s ease;
  height: fit-content;
}

.post-card:hover {
  transform: scale(1.005);
}

.post-card-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 20px auto auto;
  padding: 1rem;
  gap: 10px;
  color: #000;
}

.btn {
  padding: 8px;
  box-shadow: none;
  border-width: 1px;
}

.btn-primary {
  background-color: #4a90d9;
  border-color: #4a90d9;
}

.btn-primary:hover {
  background-color: #3a7ec4;
  border-color: #3a7ec4;
}

.btn-add {
  background-color: oklch(87.1% 0.15 154.449);
  color: oklch(20.5% 0 0);
}

.btn-add:hover {
  background-color: oklch(92.5% 0.084 155.995);
  color: oklch(14.5% 0 0);
}

.btn-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.45rem;
  margin: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: rgb(100, 116, 139);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
  color: oklch(63.7% 0.237 25.331);
}

.btn-del:hover {
  background-color: rgb(254, 226, 226);
  color: rgb(185, 28, 28);
}

.btn-del-full {
  background-color: oklch(57.7% 0.245 27.325) !important;
  color: oklch(92.2% 0 0);
}

.btn-del-full:hover {
  background-color: oklch(63.7% 0.237 25.331) !important;
  color: oklch(20.5% 0 0);
}

.modal-box {
  color: #000;
  padding: 1rem;
}

.modal-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.modal-action form {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* custom styling for form */
.pedagogy-quiz-section {
  max-width: 600px;
  margin: 0 auto;
}

.pedagogy-quiz-form {
  font-size: 1rem;
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 0.25cm;
  border-top: 50px solid rgb(255, 255, 255);
  padding: 1rem !important;
  color: rgba(0, 0, 0, 0.75);
}

fieldset legend {
  font-size: 1.35rem;
}

fieldset label {
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 5px;
}

/* NOTICE: margin-bottom should not be applied to radio/checkbox input labels */

fieldset select {
  border-radius: 0.15cm;
  padding: 3px 5px;
}

fieldset > div > input {
  color: black;
  padding: 0 5px;
}

.user-input-rendering {
  color: black;
}

.user-input-spacing {
  padding: 0 5px;
}

.pedagogy-quiz-form select {
  width: fit-content;
}

textarea {
  border-radius: 0.2cm;
  min-height: 100px;
  padding: 0.75rem 0.35rem !important;
  resize: vertical;
  white-space: pre-wrap;
}

/* ############################## */
/* ######## PROGRESS BAR ######## */
/* ############################## */
.progress-bar-main-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 28px;
  width: 100%;
  gap: 3px;
}

.progress-bar-nav-segment {
  cursor: pointer;
}

.progress-bar-nav-segment:focus {
  outline: none;
}

.progress-bar-nav-segment:focus-visible {
  outline: 2px solid oklch(55% 0.15 162);
  outline-offset: 2px;
  border-radius: 4px;
}

.progress-bar-fill-wrapper {
  flex: 1;
  display: grid;
}

.progress-bar-fill-incomplete {
  grid-area: 1/1;
  height: 10px;
  background-color: oklch(70.7% 0.022 261.325);
  border-radius: 5px;
}

.progress-bar-fill-complete {
  grid-area: 1/1;
  height: 10px;
  width: 0;
  background-color: oklch(69.6% 0.17 162.48);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.progress-bar-tab-wrapper {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.progress-bar-step-num {
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
}

.progress-bar-tab-incomplete {
  grid-area: 1/1;
  background-color: oklch(70.7% 0.022 261.325);
}

.progress-bar-tab-complete {
  grid-area: 1/1;
  width: 0;
  background-color: oklch(69.6% 0.17 162.48);
  transition: width 0.3s ease;
}

.progress-bar-tab-complete.complete-tab {
  transition-delay: 0.3s;
}

.complete-fill {
  width: 100%;
}

.complete-tab {
  width: 24px;
}

.syllabus-builder-page-header {
  max-width: 1800px;
  margin: 0 auto 1rem;
  padding: 1.25rem 20px 0;
  width: 100%;
}

.syllabus-builder-page-title {
  margin: 0;
  font-size: clamp(1.75rem, 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
}

/* 
  3-column grid layout for the syllabus builder.

  - Centered with a max width and padding
  - Side columns are flexible and smaller
  - Middle column expands to take most space
  - "minmax(0, ...)" prevents overflow in grid children; minmax(smallest size, largest size)
*/
.syllabus-builder-section-wrapper {
  margin: 0 auto;
  width: 100%;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(200px, 0.5fr) minmax(300px, 2fr) minmax(
      200px,
      0.5fr
    );
  gap: 10px;
  max-width: 1800px;
  /* width: 100%; */
}

.syllabus-builder-section-wrapper.collapse-left {
  grid-template-columns: 50px minmax(300px, 2fr) minmax(200px, 0.5fr);
}

.syllabus-builder-section-wrapper.collapse-right {
  grid-template-columns: minmax(200px, 0.5fr) minmax(300px, 2fr) 50px;
}

.syllabus-builder-section-wrapper.collapse-left.collapse-right {
  grid-template-columns: 50px minmax(300px, 1fr) 50px;
}

.syllabus-form {
  max-width: 100%;
}

.syllabus-form > .progress-bar-main-wrapper {
  margin-bottom: 1.25rem;
}

/* ################################################### */
/* ##### Components styling for syllabus builder ##### */
/* ################################################### */
.make-section-unselectable {
  opacity: 50%;
  pointer-events: none;
}

.syllabus-component-dropdown {
  border: 1px solid rgb(168, 168, 168);
  border-radius: 10px;
  overflow: hidden;
}

.dropdown-summary {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dropdown-arrow {
  background-color: rgb(216, 216, 216);
  border-radius: 50%;
  padding: 4px;
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
  cursor: pointer;
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  transition:
    background-color 0.2s,
    color 0.2s;
}

/* Main tab accordions: match white content area; light grey on hover (not dark bar) */
.syllabus-component-dropdown > summary.dropdown-summary {
  background-color: #ffffff;
}

.syllabus-component-dropdown > summary.dropdown-summary:hover {
  background-color: rgb(236, 236, 236);
  color: inherit;
}

.syllabus-component-dropdown
  > summary.dropdown-summary:hover
  .syllabus-component-title {
  color: #1e293b;
}

/* Nested Area-1 style summaries (bordered row): light surface, same light-grey hover */
.syllabus-component-dropdown summary.syllabus-t1-details__summary {
  background-color: rgb(252, 252, 252);
}

.syllabus-component-dropdown summary.syllabus-t1-details__summary:hover {
  background-color: rgb(236, 236, 236);
  color: inherit;
}

.syllabus-component-dropdown
  summary.syllabus-t1-details__summary:hover
  .syllabus-t1-details__hint {
  color: rgb(100, 116, 139);
}

.syllabus-component-dropdown summary img {
  transition: 0.3s;
  rotate: 0deg;
}

/* when OPEN — main accordion row: line between header and body */
.syllabus-component-dropdown[open] > summary.dropdown-summary {
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid rgb(208, 208, 210);
}

.syllabus-component-dropdown[open] > summary img {
  transition: 0.3s;
  rotate: 180deg;
}

.syllabus-component-dropdown[open] fieldset {
  border-radius: 0 0 10px 10px;
}

/* Generic component body stack — vertical sections inside a component's <details> body
   (no inner fieldset chrome; just the outer component border) */
.syllabus-component-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: #ffffff;
}

/* Generic component dropdown summary title (large heading on the accordion row) */
.syllabus-component-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1e293b;
}

.syllabus-t1-linehead {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

/* —— Reusable section + card primitives (heading + soft card like the builder mock) —— */
.syllabus-section {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0.75rem;
}

.syllabus-section-heading {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1e293b;
  text-align: left;
}

/* Optional descriptive text that sits under a section heading */
.syllabus-section-meta {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(71, 85, 105);
}

.syllabus-card {
  background-color: oklch(98.5% 0 0);
  border: none;
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: none;
}

.syllabus-card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.syllabus-card-title {
  color: #1e293b;
  font-weight: 700;
}

h4.syllabus-card-title {
  font-size: 1rem !important;
}

.personnel-row__head
  > .syllabus-card-title:not(.syllabus-card-head .syllabus-card-title) {
  display: flex;
  flex-direction: row;
  gap: 5px;

  background-color: rgb(224, 224, 224);
  padding: 5px 10px;
  border-radius: 12px;
}

.syllabus-card-head .syllabus-card-title {
  margin: 0;
  font-size: 1rem;
}

.syllabus-oh-slots-footer {
  margin-top: 0.25rem;
}

.syllabus-oh-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
}

.syllabus-oh-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.syllabus-oh-add-btn:not(:disabled):hover {
  color: rgb(55, 65, 81);
  text-decoration: underline;
}

.syllabus-field-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

/* Horizontal inline group of radios / checkboxes with labels */
.syllabus-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-top: 0.35rem;
}

.syllabus-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}

.syllabus-radio input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: rgb(37, 99, 235);
}

/* Office hours: in-person vs remote type switcher */
.syllabus-oh-type-row {
  margin-bottom: 1rem;
}

.syllabus-oh-type-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-top: 0.35rem;
}

.syllabus-oh-type-panel {
  margin-top: 0.25rem;
}

.syllabus-soft-input {
  background-color: rgb(241, 243, 245);
  border: 1px solid rgb(229, 231, 235);
  color: #111827;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.syllabus-soft-input:focus {
  border-color: rgb(148, 163, 184);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
}

.syllabus-oh-time-wrap {
  position: relative;
}

.syllabus-oh-time-wrap .syllabus-soft-input {
  padding-right: 2.25rem;
}

.syllabus-oh-time-icon {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: rgb(100, 116, 139);
  pointer-events: none;
}

.syllabus-day-toggle-row--oh .syllabus-day-toggle {
  background-color: rgb(255, 255, 255);
  border-color: rgb(220, 223, 228);
}

.syllabus-day-toggle-row--oh .syllabus-day-toggle:has(input:checked) {
  background-color: rgb(51, 65, 85);
  color: #fff;
  border-color: rgb(51, 65, 85);
}

.syllabus-oh-add-icon {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}

/* Optional nested block (additional hours): summary bar + plain body */
.syllabus-t1-details {
  margin-top: 0.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.syllabus-t1-details > summary {
  list-style: none;
}

.syllabus-t1-details > summary::-webkit-details-marker {
  display: none;
}

.syllabus-t1-details > summary::marker {
  content: "";
}

.syllabus-t1-details__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  border: 1px solid rgb(208, 208, 210);
  border-radius: 0.35rem;
  list-style: none;
}

/* Nested <details> inside Area 1: do not use the main accordion <summary> chrome */
.syllabus-component-dropdown
  .syllabus-t1-details
  > summary.syllabus-t1-details__summary {
  border-radius: 0.35rem;
}

.syllabus-t1-details__hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(100, 116, 139);
}

.syllabus-t1-details[open] > .syllabus-t1-details__summary {
  border-radius: 0.35rem 0.35rem 0 0;
  border-bottom: none;
}

.syllabus-t1-details__body {
  margin: 0;
  padding: 0.75rem 0 0.25rem;
  border: none;
  background-color: transparent;
}

.syllabus-day-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.syllabus-day-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgb(168, 168, 168);
  border-radius: 0.35rem;
  background: rgb(252, 252, 252);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.syllabus-day-toggle:has(input:checked) {
  background: rgb(70, 70, 70);
  color: #fff;
  border-color: rgb(70, 70, 70);
}

.syllabus-day-toggle input {
  margin: 0;
  accent-color: rgb(69.6% 0.17 162.48);
}

/* ################################################ */
/* ##### Bloom's Taxonomy Action Word List     ##### */
/* ################################################ */

/* Colored left-border accent on each level summary */
.taxonomy-summary-l1 {
  border-left: 4px solid #ef4444;
}
.taxonomy-summary-l2 {
  border-left: 4px solid #f97316;
}
.taxonomy-summary-l3 {
  border-left: 4px solid #eab308;
}
.taxonomy-summary-l4 {
  border-left: 4px solid #22c55e;
}
.taxonomy-summary-l5 {
  border-left: 4px solid #3b82f6;
}
.taxonomy-summary-l6 {
  border-left: 4px solid #a855f7;
}

/* Circular level number badge (L1–L6) */
.taxonomy-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.taxonomy-badge-l1 {
  background-color: #ef4444;
}
.taxonomy-badge-l2 {
  background-color: #f97316;
}
.taxonomy-badge-l3 {
  background-color: #ca8a04;
} /* darker yellow so white text is readable */
.taxonomy-badge-l4 {
  background-color: #16a34a;
}
.taxonomy-badge-l5 {
  background-color: #3b82f6;
}
.taxonomy-badge-l6 {
  background-color: #a855f7;
}

/* Small definition text shown inside the summary row */
.taxonomy-definition {
  margin: 0.15rem 0 0;
  font-size: 0.775rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgb(100, 116, 139);
  max-width: 56ch;
}

/* Keep Bloom's levels visually closer together without crowding text */
.taxonomy-level-list {
  gap: 0.2rem;
}

.taxonomy-level-list .dropdown-summary {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Body area inside each level <details> */
.taxonomy-body {
  padding: 0.7rem 1rem 0.8rem;
  background-color: #ffffff;
}

/* Flex-wrap pill grid */
.taxonomy-word-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Individual word pill */
.taxonomy-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Per-level chip colors */
.taxonomy-chip-l1 {
  background-color: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.taxonomy-chip-l2 {
  background-color: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.taxonomy-chip-l3 {
  background-color: #fefce8;
  border-color: #fde047;
  color: #713f12;
}
.taxonomy-chip-l4 {
  background-color: #f0fdf4;
  border-color: #86efac;
  color: #14532d;
}
.taxonomy-chip-l5 {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #1e3a8a;
}
.taxonomy-chip-l6 {
  background-color: #faf5ff;
  border-color: #d8b4fe;
  color: #581c87;
}

/* Optional usage-example note below the word grid */
.taxonomy-example-note {
  margin: 0.65rem 0 0;
  font-size: 0.775rem;
  font-style: italic;
  color: rgb(100, 116, 139);
}

/* ####################### */
/* ##### FOR AI Tool ##### */
/* ####################### */
.syllabus-ai-section {
  display: flex;
  flex-direction: column;
  height: fit-content;
  background-color: oklch(55.1% 0.027 264.364); /* Tailwind: Gray-500 */
  border-radius: 0.25cm;
  padding: 10px;

  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
}

.ai-heading {
  text-align: center;
}

/* UI for AI Assistant Tool */
.ai-response-ui {
  max-height: 350px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgb(48, 48, 48);
  border-radius: 0.25cm;
  color: rgb(255, 255, 255);
}

.ai-response-content-ui {
  display: flex;
  flex-direction: column;
  /* justify-content: end; */
}

.chat-spacer {
  margin-top: auto;
}

.ai-response-empty-ui {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Content for AI Assitant Tool */
.ai-response-empty-content {
  font-size: 1.5rem;
}

/* #################### */
/* ##### FOR USER ##### */
/* #################### */
/* UI Output */
.user-response-ui {
  display: flex;
  justify-content: end;
}

/* Content Output*/
.user-response-content {
  width: 80%;
  background-color: oklch(37.3% 0.034 259.733); /* Tailwind: Gray-700 */
  color: rgb(255, 255, 255);
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
}

/* UI INPUT */
.user-input-for-ai {
  border-radius: 30px;
}

/* ####### END ####### */

/* ############################################### */
/* ###### For Syllabus Custom Input styling ###### */
/* ############################################### */
.input-container {
  background-color: rgb(233, 233, 233);
  padding: 10px;
  border-radius: 10px;
}

/* 
  In addition to stacking labels with input, also keeps them bottom-aligned   
  when stretched vertically (keeping everything aligned)
*/
.input-field-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

/* Creates a new line to prevent overflow of other content */
.input-field-wrapper .label {
  white-space: normal;
  overflow-wrap: break-word;
}

.radio-group {
  display: flex;
  flex-direction: row !important;
  gap: 10px;
}

.input-disabled {
  background-color: oklch(92.3% 0.003 48.717);
  color: oklch(37.4% 0.01 67.558);
  cursor: default;
  user-select: none;
}

/* ######## END ######### */

/* For onboarding */
.default-form {
  width: 800px;
  margin: 0 auto;
}

.site-footer {
  background-color: #111827;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 0.75rem 1rem;
}

.site-footer-text {
  font-size: 0.875rem;
}

.site-footer-link {
  color: inherit;
  text-decoration: underline;
}

.site-footer-link:hover {
  opacity: 0.85;
}

/**
 * Styling for a custom heading input field which allows the label
 * to hover directly within the input field. When on focus or has 
 * content, it pushes the label directly above the input field.
 */
.heading-title-wrapper {
  position: relative;
}

.heading-title-input {
  background-color: transparent !important;
  border: none;
  border-bottom: 1px solid oklch(68.5% 0.169 237.323);
  padding: 20px 3px 1px 3px;

  width: 100%;
  height: 60px;

  font-size: 1.5rem;
  outline: none;
}

.heading-title-label {
  position: absolute;
  left: 0;
  top: 35%;
  font-size: 1.5rem;
  color: oklch(70.8% 0 0);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.heading-title-wrapper:focus-within .heading-title-label,
.heading-title-input:not(:placeholder-shown) + .heading-title-label {
  transform: translateY(-22px) scale(0.6);
  color: oklch(68.5% 0.169 237.323);
}

/* ########################## */
/* ###### Progress Tab ###### */
/* ########################## */
.progress-tab-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background-color: rgb(252, 252, 252);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
  border-radius: 0.25cm;
}

.progress-tab-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-tab-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgb(233, 233, 233);
  border-radius: 0.25cm;
  cursor: pointer;
  transition: 0.3s;
}

.progress-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.progress-tab-item-arrow {
  filter: invert(1);
  width: 20px;
  height: 20px;
  rotate: 270deg !important;
  opacity: 0;
  transition: 0.3s;
}

/* When tab is active */
.progress-tab-item.active .progress-tab-item-arrow {
  transition: 0.3s;
  opacity: 1;
}

.syllabus-step {
  display: none;
}

.syllabus-step.active {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.progress-tab-item.active {
  transition: 0.3s;
  background-color: rgb(70, 70, 70);
  color: white;
}

.course-objective-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab2-section-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tab2-section-card {
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 14px;
  background-color: rgb(248, 250, 252);
}

.tab2-section-card > .fieldset {
  margin: 0;
}

.tab2-tip-icon {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  opacity: 0.7;
  transform: translateY(-0.06em);
}

.course-objective-card {
  border: 2px solid rgb(168, 168, 168);
  border-radius: 12px;
  padding: 12px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-objective-card__head {
  display: flex;
  justify-content: space-between;
}

.priority-level {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* ################################### */
/* ###### Left Pannel for Tab 3 ###### */
/* ################################### */
.left-panel-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Center workstation summary card keeps the soft tint */
.objective-summary-card {
  border-color: color-mix(in srgb, var(--objective-accent) 45%, white);
  background-color: color-mix(in srgb, var(--objective-accent) 18%, white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Left panel objective items: white default, grey when selected */
.objective-item {
  background-color: #ffffff;
  border-color: rgb(229, 231, 235);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.objective-item:hover {
  background-color: rgb(245, 246, 248);
}

.objective-item.selected {
  background-color: rgb(229, 231, 235);
  border-color: rgb(156, 163, 175);
}

/* Color dot indicator next to each objective */
.objective-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.3rem;
  border-radius: 9999px;
  background-color: var(--objective-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Color progression: green -> blue -> purple */
.objective-color-1 {
  --objective-accent: #22c55e;
} /* green */
.objective-color-2 {
  --objective-accent: #14b8a6;
} /* teal */
.objective-color-3 {
  --objective-accent: #3b82f6;
} /* blue */
.objective-color-4 {
  --objective-accent: #6366f1;
} /* indigo */
.objective-color-5 {
  --objective-accent: #8b5cf6;
} /* violet */
.objective-color-6 {
  --objective-accent: #a855f7;
} /* purple */

/* Provisional weight input + % suffix */
.provisional-weight-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.provisional-weight-suffix {
  font-size: 0.95rem;
  color: rgb(71, 85, 105);
  font-weight: 600;
}

/* Hide "Add Main Assignment" button once an anchor task exists */
.anchor-card:has(.anchor-task-list .task-row) .add-anchor-btn-wrapper {
  display: none;
}

/* ################################ */
/* ###### Center Workstation ###### */
/* ################################ */
.center-workstation-container {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}

/* Hide the rate select by default; reveal when Automatic radio is checked */
.assignment-frequency-section select[name="rate"] {
  display: none;
}
.assignment-frequency-section:has(input[value="automatic"]:checked)
  select[name="rate"] {
  display: block;
}

[id^="assignment-set-list-"] {
  counter-reset: aset-counter;
}

.assignment-set-row {
  counter-increment: aset-counter;
}

.assignment-set-number::before {
  content: counter(aset-counter);
}

/* ################################# */
/* ########## Info Circle ########## */
/* ################################# */
.info-modal-container {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.35);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  z-index: 5;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.info-modal-container.open {
  opacity: 1;
  pointer-events: auto;
}

.info-modal {
  background-color: oklch(97% 0 0);
  box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.15);
  border-radius: 24px;

  max-width: 700px;
  min-width: 0;

  margin: 0 50px;
}

.x-button-grid {
  display: grid;
  place-items: center;

  background-color: oklch(87% 0 0);
  opacity: 0.75;
  border-radius: 50%;

  height: 30px;
  width: 30px;

  transition: 0.3s;
}

.x-button-grid:hover {
  transition: 0.3s;
  cursor: pointer;
  scale: 1.05;
  opacity: 1;
  transform: rotate(5deg);
}

.x-button-down,
.x-button-up {
  grid-area: 1/1;

  width: 20px;
  height: 2px;

  background: oklch(26.9% 0 0);
  border-radius: 8px;
}

.x-button-down {
  transform: rotate(45deg);
}

.x-button-up {
  transform: rotate(-45deg);
}

.info-modal__head {
  padding: 10px 15px;
}

.info-modal__head {
  border-bottom: 2px solid oklch(55.6% 0 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* right padding is -1 px because scroll bar takes up 1px */
.info-modal__body {
  padding: 20px 19px 20px 20px;
  max-height: 500px;
  overflow-y: scroll;
}

.grade-scale-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.grade-scale-table th,
.grade-scale-table td {
  border: 2px solid #1e293b;
  padding: 14px 16px;
  text-align: center;
  font-weight: 500;
}

.grade-scale-table thead tr {
  background-color: #f1f5f9;
  font-weight: 700;
}

/* ########## Assessment Refinement ########## */
.assessment-refinement-container {
  display: flex;
  flex-direction: column;
}

.assessment-refinement-total-course-weight {
  display: flex;
  justify-content: space-between;
  padding: 8px;

  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.inner-tab-buttons {
  border-width: 1px;
  border-radius: 8px;
  padding: 3px 12px;
  width: 175px;

  transition: 0.3s;
}

.inner-tab-buttons:hover {
  transition: 0.3s;
  background-color: oklch(70.7% 0.165 254.624);
}

.selected {
  background-color: oklch(80.9% 0.105 251.813);
}

.course-total-weight-box-assignment-implementation {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;

  border-radius: 0 0 12px 12px;
}

#objectives-list .objective-row:first-child [aria-label="Move objective up"] {
  display: none;
}

#objectives-list .objective-row:last-child [aria-label="Move objective down"] {
  display: none;
}