@import "./hw-combobox.css";

@tailwind base;

:root {
  --ct-app-background: #080f21;
  --ct-text-accent: #b3d0ff;
  --primary: var(--ct-app-background);
  --secondary: var(--ct-text-accent);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 25px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply bg-cc-black-dark text-cc-gray-light;
  }

  h1 {
    @apply font-special text-4xl font-semibold text-cc-blue-text;
  }
  h2 {
    @apply font-special text-3xl font-semibold text-cc-blue-text;
  }
  h3 {
    @apply font-special text-2xl font-semibold text-cc-blue-text;
  }
  h4 {
    @apply font-special text-xl font-bold text-cc-blue-text;
  }
  h5 {
    @apply font-special text-xl font-semibold text-cc-blue-text;
  }
  label {
    @apply text-cc-gray-light ml-1.5;
  }

  /* select {
    @apply py-1 px-4 rounded-lg;
    &:focus {
      @apply ring-cc-blue-light;
    }
  } */
}

@layer utilities {
  .white-dropdown-arrow {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#B3D0FF"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    appearance: none;
  }

  /* Trix buttons */
  .trix-button-group button {
    @apply bg-cc-blue-text-lighter rounded-md;
  }

  trix-toolbar .trix-button-group {
    @apply border-none space-x-0.5;
  }

  /* Combobox utilities */
  .hw-white-handles + .hw-combobox__handle::before {
    --hw-handle-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#B3D0FF"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
    --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#B3D0FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    --hw-handle-width: 1rem;
    --hw-handle-width--queried: 1rem;
    background-position: calc(50% + 2px) 50%;
  }

  .potential-conflict {
    @apply bg-transparent opacity-100;
  }

  .conflict {
    @apply bg-transparent opacity-100;
  }

  /* One-shot glow after a scheduled course lands from a drag (see appear_controller) */
  @keyframes sc-landed-glow {
    0% {
      box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
    30% {
      box-shadow: 0 0 16px 8px rgba(250, 204, 21, 0.55);
    }
    /* Same as 40% — holds full glow before fading (25% of timeline ≈ 0.5s at 2s duration) */
    70% {
      box-shadow: 0 0 16px 8px rgba(250, 204, 21, 0.55);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
  }

  .sc-landed-glow {
    animation: sc-landed-glow 2.5s ease-in;
  }

  @keyframes view-cache-pulse {
    0%,
    100% {
      transform: scale(0.35);
      opacity: 0.25;
    }

    50% {
      transform: scale(1);
      opacity: 0.45;
    }
  }

  .view-cache-pulse-dot {
    will-change: transform, opacity;
    animation: view-cache-pulse 650ms ease-in-out infinite;
  }

  .modal-scroll-fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
  }

  .modal-scroll-fade.modal-scroll-fade--at-bottom {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Large scrollers (timetable grid): sticky edge fade instead of masking all content */
  .modal-scroll-fade--overlay {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scroll-fade-edge {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 6;
    height: 3.5rem;
    margin-top: -3.5rem;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgb(10 18 40 / 0.92) 0%,
      rgb(10 18 40 / 0.45) 55%,
      transparent 100%
    );
    opacity: 1;
    transition: opacity 150ms ease-out;
  }

  .modal-scroll-fade--at-bottom > .scroll-fade-edge {
    opacity: 0;
  }

  .scroll-list-indicator {
    /* Above modal overlays (z-1000) so share/list chevrons stay visible */
    @apply pointer-events-none fixed z-[1100] flex h-8 w-8 items-center justify-center
           rounded-full border-0 bg-transparent p-0 text-cc-blue-text opacity-0
           transition-[opacity,transform] duration-200 ease-out;
    background: radial-gradient(
      circle at 50% 42%,
      rgba(16, 30, 66, 0.28) 0%,
      rgba(16, 30, 66, 0.1) 52%,
      transparent 76%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translate(-50%, -50%);
  }

  .scroll-list-indicator::before {
    content: "";
    width: 0.62rem;
    height: 0.38rem;
    background: linear-gradient(
      180deg,
      rgba(179, 208, 255, 0.9) 0%,
      rgba(179, 208, 255, 0.35) 100%
    );
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.4 1.6 6 6.2 10.6 1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.4 1.6 6 6.2 10.6 1.6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .scroll-list-indicator--visible {
    @apply pointer-events-auto cursor-pointer opacity-70;
  }

  .scroll-list-indicator--visible:hover,
  .scroll-list-indicator--visible:focus-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    background: radial-gradient(
      circle at 50% 42%,
      rgba(16, 85, 195, 0.28) 0%,
      rgba(16, 30, 66, 0.18) 52%,
      transparent 78%
    );
  }

  .scroll-list-indicator--visible:hover::before,
  .scroll-list-indicator--visible:focus-visible::before {
    background: linear-gradient(
      180deg,
      rgba(214, 230, 255, 1) 0%,
      rgba(179, 208, 255, 0.7) 100%
    );
  }

  .scroll-list-indicator--visible:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 198, 25, 0.55);
  }

  /* Ghost scheduled course cards (split courses in other grade columns) */
  .ghost-card {
    @apply opacity-70;
  }

  .hide-ghost-cards [data-ghost="true"] {
    @apply hidden;
  }

  .hide-ghost-cards .ghost-label-counter {
    @apply hidden;
  }

  /*
   * Color-by-department: activation only. Slot tokens (--sc-dept-*) come from
   * config/department_palette.js via the Tailwind plugin in tailwind.config.js.
   * Cards always carry sc-dept-N (+ sc-dept-inverted when needed); this parent
   * class turns the palette on.
   */
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) {
    background-image: linear-gradient(
      to bottom right,
      var(--sc-dept-from),
      var(--sc-dept-to)
    ) !important;
  }

  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .scheduled-course-card-face [id$="-course-code"],
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .course-code-full-hover {
    color: var(--sc-dept-text) !important;
  }

  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .teacher-name,
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .teacher-name-full-hover {
    color: var(--sc-dept-text-secondary) !important;
  }

  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .room-num,
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .room-num-full-hover {
    color: var(--sc-dept-text-muted) !important;
  }

  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .course-code-full-hover,
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .teacher-name-full-hover,
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .room-num-full-hover {
    background-image: linear-gradient(
      to bottom right,
      var(--sc-dept-from),
      var(--sc-dept-to)
    ) !important;
  }

  /*
   * Modal pencil uses hover-reveal (visible on card hover, not button :hover).
   * Match the dept fill whenever color-by-department is on so the revealed
   * chrome isn't the default blue chip on a colored card.
   * Icon is a masked span (bg-current), not an <svg>.
   */
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .sc-edit-button {
    background-color: var(--sc-dept-from) !important;
    background-image: linear-gradient(
      to bottom right,
      var(--sc-dept-from),
      var(--sc-dept-to)
    ) !important;
    color: var(--sc-dept-text) !important;
    --tw-ring-color: var(--sc-dept-text-secondary);
  }

  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .sc-edit-button .bg-current {
    color: var(--sc-dept-text) !important;
  }

  /* Button :hover — lighten dark slots / slightly darken light slots (readable affordance). */
  .color-by-department .scheduled-course[class*="sc-dept-"]:not(.scheduled-block) .sc-edit-button:hover {
    background-color: color-mix(in srgb, var(--sc-dept-from) 72%, white) !important;
    background-image: linear-gradient(
      to bottom right,
      color-mix(in srgb, var(--sc-dept-from) 72%, white),
      color-mix(in srgb, var(--sc-dept-to) 72%, white)
    ) !important;
    --tw-ring-color: var(--sc-dept-text);
  }

  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .sc-edit-button {
    --tw-ring-color: var(--sc-dept-text-muted);
  }

  /* Dark ring on light cards: pull flush to the corner so card fill doesn't show as a seam. */
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .sc-edit-button-wrap {
    top: -1px;
    right: -1px;
  }

  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .sc-edit-button:hover {
    background-color: color-mix(in srgb, var(--sc-dept-from) 82%, black) !important;
    background-image: linear-gradient(
      to bottom right,
      color-mix(in srgb, var(--sc-dept-from) 82%, black),
      color-mix(in srgb, var(--sc-dept-to) 82%, black)
    ) !important;
    --tw-ring-color: var(--sc-dept-text);
  }

  /* Gold conflict text is unreadable on light (inverted) dept cards. */
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .scheduled-course-card-face .teacher-name.conflict,
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .scheduled-course-card-face .teacher-name.potential-conflict,
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .scheduled-course-card-face .room-num.conflict,
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .scheduled-course-card-face .room-num.potential-conflict,
  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .conflict-jump {
    color: theme("colors.cc-red-dark") !important;
  }

  .color-by-department .scheduled-course.sc-dept-inverted:not(.scheduled-block) .conflict-jump:focus-visible {
    --tw-ring-color: theme("colors.cc-red-dark");
  }

  .timetable-filter-hidden {
    @apply hidden;
  }

  .timetable-filter-row-hidden {
    @apply hidden;
  }

  /* Timetable filter: collapsed flag on sidebar edge; open bar sticky at top of page */
  .timetable-filter {
    @apply relative w-full shrink-0;
  }

  .timetable-filter:not(.is-open) {
    @apply h-0 overflow-visible;
  }

  .timetable-filter:not(.is-open) .timetable-filter__inner {
    /* Keep in sync with #time-table-sidebar expanded width (w-52) */
    @apply fixed left-52 top-[calc(2.75rem+0.5rem)] z-[505] flex h-7 w-7 items-center overflow-hidden
           rounded-r-md border border-l-0 border-cc-blue-medium/50
           bg-cc-black-dark shadow-lg pointer-events-auto cursor-pointer;
    transition: width 200ms ease-out, left 150ms ease-out;
  }

  body:has(#time-table-sidebar.collapsed) .timetable-filter:not(.is-open) .timetable-filter__inner {
    @apply left-16;
  }

  .timetable-filter:not(.is-open) .timetable-filter__inner:hover {
    width: 8rem;
  }

  .timetable-filter:not(.is-open) .timetable-filter__trigger {
    @apply absolute inset-0 z-10 flex h-full w-full items-center justify-start rounded-r-md pl-1.5;
  }

  .timetable-filter:not(.is-open) .timetable-filter__label,
  .timetable-filter:not(.is-open) .timetable-filter__field,
  .timetable-filter:not(.is-open) .timetable-filter__clear {
    @apply hidden;
  }

  .timetable-filter.is-open {
    @apply w-full shrink-0 border-b border-cc-blue-medium/40 pt-2;
  }

  #timetable-toolbar:has(.timetable-filter.is-open) {
    @apply border-b border-cc-blue-medium/40;
  }

  .timetable-filter.is-open .timetable-filter__inner {
    @apply relative flex w-full min-h-[2rem] flex-nowrap items-center gap-2
           overflow-x-auto px-3 py-1.5 pr-16;
  }

  #timetable-scroll:has(.timetable-filter.is-open)
    [data-timetable-filter-target="headerStack"] {
    top: 3rem;
  }

  .timetable-filter__trigger {
    @apply flex shrink-0 items-center justify-center text-cc-gray-light
           hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .timetable-filter.is-open .timetable-filter__trigger {
    @apply relative z-auto h-8 w-8;
  }

  .timetable-filter__label-group {
    @apply hidden shrink-0 items-center gap-2;
  }

  .timetable-filter.is-open .timetable-filter__label-group {
    @apply inline-flex;
  }

  .timetable-filter__label {
    @apply text-xs font-medium uppercase tracking-wide text-cc-gray-medium-light;
  }

  .timetable-filter__help {
    @apply inline-flex items-center gap-1 rounded px-1 py-0.5 text-xs font-normal normal-case
           tracking-normal text-cc-gray-medium-light no-underline transition-colors
           hover:bg-white/10 hover:text-cc-blue-text focus:outline-none
           focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .timetable-filter__field {
    @apply hidden min-w-0 flex-1 items-center gap-1.5 overflow-hidden;
  }

  .timetable-filter.is-open .timetable-filter__field {
    @apply flex;
  }

  .timetable-filter__chips {
    @apply shrink-0 inline-flex flex-nowrap items-center gap-1.5 overflow-x-auto;
  }

  .timetable-filter__input {
    @apply min-w-[8rem] max-w-md flex-1 shrink text-sm bg-transparent border-none
           text-cc-gray-light placeholder:text-cc-gray-medium-light
           focus:outline-none focus:ring-0;
  }

  .timetable-filter__clear {
    @apply hidden shrink-0 text-xs text-cc-gray-medium-light hover:text-cc-gray-light whitespace-nowrap;
  }

  .timetable-filter.is-open .timetable-filter__clear {
    @apply fixed right-4 top-[calc(2.75rem+0.5rem)] z-[470] inline px-2 py-1 rounded-md
           bg-cc-black-dark/90 backdrop-blur-sm;
  }

  .timetable-filter-chip {
    @apply inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-md shrink-0
           bg-cc-blue-dark text-cc-gray-light border border-cc-blue-medium whitespace-nowrap;
  }

  .timetable-filter-chip--exclude {
    @apply border-red-500/60 bg-red-950/40 text-red-200;
  }

  .timetable-filter-chip--invalid-field {
    @apply border-red-500/50 bg-red-950/25 text-red-100;
  }

  .timetable-filter-chip__warning {
    @apply inline-flex shrink-0 items-center justify-center w-4 h-4 rounded-full
           bg-red-600 text-[10px] font-bold leading-none text-white cursor-help;
  }

  /*
   * Toolbar (and overflowing view-options menu) must sit above the grid:
   * cards z-10 / hover z-250, course hovers z-260, sticky headers z-455,
   * pending column z-460. Keep this below the bottom panel (z-480) and
   * sidebar (z-500).
   */
  #timetable-toolbar {
    @apply relative z-[470];
  }

  #timetable-toolbar .timetable-filter,
  #timetable-toolbar .timetable-filter:not(.is-open) {
    @apply h-auto w-full overflow-visible;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__inner,
  #timetable-toolbar .timetable-filter:not(.is-open) .timetable-filter__inner,
  #timetable-toolbar .timetable-filter.is-open .timetable-filter__inner {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    @apply flex min-h-10 w-full items-center gap-2 overflow-visible rounded-lg border border-cc-blue-medium/35 bg-cc-blue-dark/70 px-2 py-1 shadow-none
           transition-[border-color,background-color,box-shadow] duration-150;
  }

  #timetable-toolbar .timetable-filter[data-has-chips="true"] .timetable-filter__inner {
    @apply border-cc-gold/40 bg-cc-gold/5;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__trigger,
  #timetable-toolbar .timetable-filter:not(.is-open) .timetable-filter__trigger,
  #timetable-toolbar .timetable-filter.is-open .timetable-filter__trigger {
    position: relative;
    inset: auto;
    @apply z-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-md p-0 text-cc-blue-text-light;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__label-group,
  #timetable-toolbar .timetable-filter:not(.is-open) .timetable-filter__label-group,
  #timetable-toolbar .timetable-filter .timetable-filter__field,
  #timetable-toolbar .timetable-filter:not(.is-open) .timetable-filter__field {
    @apply flex;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__field {
    @apply min-w-0 flex-1;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__input {
    @apply max-w-none text-sm;
  }

  #timetable-toolbar .timetable-filter .timetable-filter__clear,
  #timetable-toolbar .timetable-filter.is-open .timetable-filter__clear {
    position: relative;
    right: auto;
    top: auto;
    @apply inline shrink-0 rounded-md bg-transparent px-2 py-1 text-xs;
  }

  .pending-add-class > summary::-webkit-details-marker {
    display: none;
  }

  .pending-add-class > summary:hover {
    @apply bg-cc-blue-medium;
  }

  .pending-add-class[open] > summary:hover {
    @apply bg-cc-blue-text-light/15 ring-1 ring-inset ring-cc-blue-text-light/50;
  }

  .pending-add-class .info-hover {
    display: none;
  }

  .pending-add-class[open] .info-hover {
    display: inline-flex;
  }

  /*
   * overflow-y:auto clips x as well, so extend the scrollport to the right
   * (padding inside, negative margin outside) so card hover-reveals can paint
   * into the timetable column without shifting the pending layout. Keep the
   * blue fill on the real column width only.
   */
  #pending-scs {
    position: relative;
    width: calc(100% + 5.5rem);
    padding-right: 5.5rem;
    margin-right: -5.5rem;
    background-color: transparent;
  }

  #pending-scs::before {
    content: "";
    position: absolute;
    inset: 0 5.5rem 0 0;
    z-index: 0;
    border-radius: 0.5rem;
    @apply bg-cc-blue-dark;
    pointer-events: none;
  }

  .info-hover {
    @apply relative inline-flex items-center;
  }

  .info-hover__icon {
    @apply flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-cc-blue-text-light/40 text-[10px] font-bold leading-none text-cc-blue-text-light;
  }

  .info-hover__tip {
    @apply pointer-events-none absolute z-[900] rounded-md border border-cc-blue-medium/35 bg-cc-blue-dark px-2.5 py-2 text-[11px] font-medium leading-4 text-cc-blue-text-light opacity-0 shadow-lg transition-opacity;
  }

  .info-hover:hover .info-hover__tip,
  .info-hover:focus .info-hover__tip,
  .info-hover:focus-within .info-hover__tip {
    @apply opacity-100;
  }

  .chip-combobox {
    @apply relative w-full;
  }

  .chip-combobox__field {
    @apply flex items-center gap-1 min-h-7 w-full px-1 rounded-lg;
  }

  [data-controller~="split-course-form"] .chip-combobox__field {
    @apply min-h-8 w-full bg-cc-black-dark py-1 px-4 rounded-lg border border-gray-500
           transition-colors duration-150;
  }

  [data-controller~="split-course-form"] .chip-combobox__field:hover,
  [data-controller~="split-course-form"] .chip-combobox__field:focus-within,
  [data-controller~="split-course-form"] .chip-combobox--has-chips .chip-combobox__field {
    @apply bg-cc-blue-dark;
  }

  [data-controller~="split-course-form"] .chip-combobox__field:focus-within {
    @apply ring-1 ring-cc-blue-light;
  }

  .chip-combobox__value {
    @apply flex flex-wrap items-center gap-1 min-w-0 flex-1;
  }

  .chip-combobox__toggle {
    @apply shrink-0 inline-flex items-center justify-center w-5 h-5
           text-cc-blue-text-light hover:text-cc-gray-light;
  }

  .chip-combobox__chevron {
    @apply w-4 h-4 transition-transform;
  }

  .chip-combobox [aria-expanded="true"] .chip-combobox__chevron {
    @apply rotate-180;
  }

  .chip-combobox__chips {
    @apply contents;
  }

  .chip-combobox__input {
    @apply min-w-[3rem] flex-1 bg-transparent border-none text-sm
           text-cc-gray-light placeholder:text-cc-blue-text-light
           focus:outline-none focus:ring-0;
  }

  .chip-combobox--has-chips .chip-combobox__input::placeholder {
    color: transparent;
  }

  .chip-combobox__listbox {
    @apply absolute left-0 z-[200] mt-1 max-h-[min(24rem,60vh)] min-w-56 w-max
           max-w-sm overflow-hidden rounded-lg border border-cc-blue-medium
           bg-cc-blue-dark/85 p-1 text-left text-sm shadow-lg backdrop-blur-md;
  }

  .chip-combobox .chip-combobox__listbox {
    @apply flex flex-col;
  }

  .chip-combobox__options {
    @apply min-h-0 w-full flex-1 overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: theme("colors.cc-blue-medium") transparent;
  }

  .chip-combobox__listbox::-webkit-scrollbar,
  .chip-combobox__options::-webkit-scrollbar {
    width: 5px;
  }

  .chip-combobox__listbox::-webkit-scrollbar-track,
  .chip-combobox__options::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }

  .chip-combobox__listbox::-webkit-scrollbar-thumb,
  .chip-combobox__options::-webkit-scrollbar-thumb {
    background-color: theme("colors.cc-blue-medium");
    border: none;
    border-radius: 5px;
  }

  .chip-combobox__group-label {
    @apply sticky top-0 z-10 w-full rounded-md px-2.5 py-1.5 text-xs font-medium
           text-cc-gray-light bg-cc-blue-dark/95 backdrop-blur-md;
  }

  .chip-combobox__group-gap {
    @apply h-2 pointer-events-none;
  }

  .chip-combobox__option {
    @apply rounded-md px-2.5 py-1.5 text-cc-gray-light cursor-pointer;
  }

  .chip-combobox__option--with-meta {
    @apply flex flex-col gap-0.5 py-2;
  }

  .chip-combobox__option-title {
    @apply block truncate text-sm font-semibold leading-5 text-cc-blue-text-light;
  }

  .chip-combobox__option-meta {
    @apply block truncate text-xs font-medium leading-4 text-cc-gray-medium-light;
  }

  .chip-combobox__option:hover,
  .chip-combobox__option--active {
    @apply bg-cc-blue-medium;
  }

  .chip-combobox__option--create {
    @apply italic text-cc-blue-text-light;
  }

  .chip-combobox__empty {
    @apply px-2 py-1 text-xs text-cc-blue-text-light;
  }

  .view-options {
    @apply relative shrink-0;
  }

  .view-tools {
    @apply shrink-0;
  }

  .view-tools__scheduled {
    @apply inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-md
           border border-cc-blue-medium/40 bg-cc-blue-dark px-2.5 text-sm
           font-medium text-cc-blue-text transition-colors
           hover:bg-cc-blue-medium/40 hover:text-cc-gray-light;
  }

  .view-tools__label {
    @apply whitespace-nowrap select-none;
  }

  .view-options__trigger {
    @apply inline-flex h-9 shrink-0 items-center gap-2 rounded-md border
           border-cc-blue-medium/40 bg-cc-blue-dark px-3 text-sm font-medium
           text-cc-blue-text transition-colors hover:bg-cc-blue-medium/40
           hover:text-cc-gray-light focus:outline-none
           focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .view-options__trigger[aria-expanded="true"] {
    @apply bg-cc-blue-medium/40 text-cc-gray-light;
  }

  .view-options__chevron {
    @apply h-4 w-4 transition-transform duration-150;
  }

  .view-options__trigger[aria-expanded="true"] .view-options__chevron {
    @apply rotate-180;
  }

  .view-options__menu {
    @apply right-0 left-auto mt-1.5 flex w-72 max-w-none flex-col overflow-hidden px-0 py-0;
  }

  .view-options__scroll {
    @apply min-h-0 flex-1 overflow-y-auto px-1.5 py-2;
  }

  .view-options__footer {
    @apply shrink-0 border-t border-cc-blue-medium/40 px-1.5 py-2;
  }

  .view-options__heading {
    @apply px-2.5 pb-1.5 pt-3 font-special text-base font-semibold leading-5
           text-cc-blue-text;
  }

  .view-options__group:first-child .view-options__heading {
    @apply pt-1;
  }

  .view-options__group + .view-options__group {
    @apply mt-2.5;
  }

  .view-options__row {
    @apply relative flex justify-between items-center gap-3 rounded-md
           px-2.5 py-2 text-sm text-cc-gray-light cursor-pointer;
  }

  .view-options__row:hover {
    @apply bg-cc-blue-medium;
  }

  .view-options__row.is-disabled {
    @apply cursor-not-allowed opacity-50 pointer-events-none;
  }

  .view-options__label-stack {
    @apply flex min-w-0 flex-1 flex-col justify-center gap-0.5;
  }

  .view-options__label-stack .view-options__label {
    @apply flex-none;
  }

  .view-options__label {
    @apply min-w-0 flex-1 truncate;
  }

  .view-options__row.is-activating {
    @apply items-start pb-1;
  }

  .view-options__hint {
    @apply hidden whitespace-normal text-[11px] italic leading-snug text-cc-blue-text-light;
  }

  .view-options__row.is-activating .view-options__hint {
    @apply block;
  }

  .view-options__row:hover .view-options__hint {
    @apply text-cc-gray-light;
  }

  .view-options__label.is-loading {
    @apply italic text-cc-blue-text;
  }

  .view-options__row:hover .view-options__label.is-loading {
    @apply text-cc-gray-light;
  }

  .view-options__label.is-active {
    @apply font-semibold text-green-400;
  }

  .view-options__switch {
    @apply relative inline-flex h-5 w-9 shrink-0 items-center;
  }

  .view-options__track {
    @apply block h-5 w-9 rounded-full bg-gray-600 transition-colors
           duration-200 ease-in-out peer-checked:bg-cc-blue-medium;
  }

  .view-options__thumb {
    @apply absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white
           transition-transform duration-200 ease-in-out peer-checked:translate-x-4;
  }

  .ct-chip {
    @apply inline-flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded-md shrink-0
           bg-cc-blue-dark text-cc-gray-light border border-cc-blue-medium whitespace-nowrap
           cursor-text;
  }

  .ct-chip__text {
    @apply flex min-w-0 flex-col;
  }

  .ct-chip__meta {
    @apply text-[10px] leading-tight text-cc-blue-text-light truncate;
  }

  .ct-chip:has(.ct-chip__meta) {
    @apply whitespace-normal items-start;
  }

  [data-controller~="split-course-form"] .chip-combobox--default .ct-chip {
    @apply items-center gap-1.5 px-2.5 py-1.5;
  }

  [data-controller~="split-course-form"] .chip-combobox--default .ct-chip__label {
    @apply text-sm font-semibold leading-4 text-cc-gray-light;
  }

  [data-controller~="split-course-form"] .chip-combobox--default .ct-chip__meta {
    @apply text-xs leading-4;
  }

  .ct-chip--new {
    @apply border-dashed border-cc-blue-text-light/70 bg-cc-blue-dark/50;
  }

  .ct-chip__remove {
    @apply shrink-0 opacity-70 hover:opacity-100 leading-none cursor-pointer;
  }

  .scheduled-course-edit-form {
    @apply w-28 gap-px rounded-md p-px ring-1 ring-cc-blue-text/35;
  }

  .scheduled-course-edit-form .chip-combobox--secondary-card .chip-combobox__field {
    @apply min-h-6 gap-0.5 rounded-sm border border-cc-blue-text/30 bg-cc-black-dark/45
           px-0.5 py-px hover:bg-cc-black-dark/70 focus-within:border-cc-blue-light/70
           focus-within:bg-cc-black-dark/80 focus-within:ring-1 focus-within:ring-inset
           focus-within:ring-cc-blue-text-lighter;
  }

  .scheduled-course-edit-form .chip-combobox__value {
    @apply flex-nowrap gap-0.5 overflow-hidden;
  }

  .scheduled-course-edit-form .chip-combobox--multi-chip .chip-combobox__value {
    @apply flex-wrap content-start overflow-hidden;
  }

  .scheduled-course-edit-form .chip-combobox--multi-chip .ct-chip {
    flex: 1 0 100%;
    max-width: 100%;
  }

  .scheduled-course-edit-form .chip-combobox--has-chips .chip-combobox__input {
    flex: 0 1 0;
    min-width: 0;
    width: 0;
    padding: 0;
  }

  .scheduled-course-edit-form .chip-combobox__input {
    @apply h-5 min-w-0 px-0.5 py-0 text-[11px] leading-none;
  }

  .scheduled-course-edit-form .chip-combobox__toggle {
    @apply h-4 w-4 text-cc-blue-text-light;
  }

  .scheduled-course-edit-form .chip-combobox__chevron {
    @apply h-3.5 w-3.5;
  }

  .scheduled-course-edit-form .ct-chip {
    @apply min-w-0 max-w-full border-cc-blue-text/35 bg-cc-blue-medium/20 px-1 py-0
           text-[11px] leading-4;
  }

  .scheduled-course-edit-form .ct-chip__label {
    @apply min-w-0 truncate;
  }

  .scheduled-course-edit-form [data-chip-combobox-name-value="scheduled_course[course_id][]"] .ct-chip__label {
    @apply font-bold text-cc-blue-text;
  }

  .scheduled-course-edit-form .ct-chip__remove {
    @apply opacity-0;
  }

  .scheduled-course-edit-form .chip-combobox__field:hover .ct-chip__remove,
  .scheduled-course-edit-form .chip-combobox__field:focus-within .ct-chip__remove {
    @apply opacity-70;
  }

  .scheduled-course-edit-form .chip-combobox__listbox {
    @apply z-[220] min-w-56 max-w-xs;
  }

  .scheduled-course-edit-form__label {
    @apply min-h-6 rounded-sm border border-cc-blue-text/30 bg-cc-black-dark/45 px-1
           text-[11px] leading-4;
  }

  .scheduled-course-edit-form__actions {
    @apply flex items-center justify-around gap-0.5 px-px pb-px;
  }

  .scheduled-course-edit-form [type="submit"] {
    @apply h-5 min-h-0 px-1 py-0 text-[10px] leading-none;
  }

  .scheduled-course-edit-form__delete-form {
    @apply m-0 flex justify-center px-px pb-px pt-0.5;
  }

  .scheduled-course-edit-form__delete {
    @apply inline-flex h-5 items-center justify-center rounded px-2
           text-[10px] font-medium leading-none text-white bg-red-600
           hover:bg-red-500 focus:outline-none
           focus-visible:ring-1 focus-visible:ring-red-300;
  }

  /* Match .input-field / @tailwindcss/forms chrome (border-gray-500). */
  .chip-combobox--input-field .chip-combobox__field {
    @apply min-h-8 w-full bg-cc-black-dark py-1 px-4 rounded-lg border border-gray-500
           transition-colors duration-150;
  }

  .chip-combobox--input-field .chip-combobox__field:hover,
  .chip-combobox--input-field .chip-combobox__field:focus-within,
  .chip-combobox--input-field.chip-combobox--has-chips .chip-combobox__field {
    @apply bg-cc-blue-dark;
  }

  .chip-combobox--input-field .chip-combobox__field:focus-within {
    @apply ring-1 ring-cc-blue-light;
  }

  .chip-combobox--input-field .chip-combobox__input {
    @apply h-6 min-w-0 px-0 py-0 text-base text-cc-gray-light
           placeholder:text-cc-blue-text-light;
  }

  /* Hide the "Search…" placeholder beside a selected chip; expand on focus. */
  .chip-combobox--input-field.chip-combobox--has-chips .chip-combobox__input {
    flex: 0 1 0;
    min-width: 0;
    width: 0;
    padding: 0;
    overflow: hidden;
  }

  .chip-combobox--input-field.chip-combobox--has-chips .chip-combobox__input::placeholder {
    color: transparent;
  }

  .chip-combobox--input-field.chip-combobox--has-chips .chip-combobox__field:focus-within .chip-combobox__input {
    flex: 1 1 3rem;
    min-width: 3rem;
    width: auto;
    overflow: visible;
  }

  .chip-combobox--input-field.chip-combobox--has-chips .chip-combobox__field:focus-within .chip-combobox__input::placeholder {
    @apply text-cc-blue-text-light;
  }

  .chip-combobox--input-field .chip-combobox__toggle {
    @apply text-cc-blue-text-light hover:text-cc-gray-light;
  }

  .chip-combobox--secondary-card .chip-combobox__field {
    @apply hover:bg-cc-blue-light focus-within:ring-1 focus-within:ring-inset
           focus-within:ring-cc-blue-text-lighter;
  }

  .chip-combobox--secondary-card .chip-combobox__input {
    @apply h-6 py-0 px-1 text-left;
  }

  .chip-combobox--secondary-card .ct-chip {
    @apply bg-cc-blue-dark/80 border-cc-blue-text-light/40;
  }

  .chip-combobox--secondary-card .ct-chip--new {
    @apply border-dashed bg-cc-blue-dark/40;
  }

  .chip-combobox--floating .chip-combobox__field {
    @apply min-h-9 rounded-lg border border-cc-blue-text/25 bg-cc-black-dark/70 px-2 pb-1 pt-2
           shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]
           transition-colors duration-150
           hover:border-cc-blue-text/40 hover:bg-cc-blue-dark
           focus-within:border-cc-blue-light/80 focus-within:bg-cc-blue-dark
           focus-within:ring-1 focus-within:ring-cc-gold/35;
  }

  .chip-combobox--floating.chip-combobox--has-chips .chip-combobox__field {
    @apply bg-cc-blue-dark;
  }

  .chip-combobox--floating .chip-combobox__value {
    @apply flex-nowrap overflow-hidden;
  }

  .chip-combobox--floating.chip-combobox--multi-chip .chip-combobox__value {
    @apply flex-wrap content-start overflow-hidden;
  }

  .chip-combobox--floating.chip-combobox--multi-chip .ct-chip:not(:last-of-type) {
    flex: 1 0 100%;
    max-width: 100%;
  }

  .chip-combobox--floating .chip-combobox__chips {
    @apply contents;
  }

  .chip-combobox--floating .chip-combobox__input {
    @apply h-5 min-w-0 flex-[1_1_3rem] px-0 py-0 text-sm placeholder:text-transparent;
  }

  .chip-combobox--floating.chip-combobox--has-chips .chip-combobox__input {
    flex: 0 1 1ch;
    min-width: 0;
    width: 1ch;
  }

  .chip-combobox__floating-label {
    @apply pointer-events-none absolute left-3 top-1/2 z-10 origin-[0]
           -translate-y-1/2 px-1.5 font-special text-sm font-semibold
           leading-4 text-text-muted duration-200;
    background-color: transparent;
    transition-property: top, transform, color, background-color;
  }

  .chip-combobox--floating:focus-within .chip-combobox__floating-label,
  .chip-combobox--floating:has(.ct-chip) .chip-combobox__floating-label,
  .chip-combobox--floating:has(.chip-combobox__input:not(:placeholder-shown)) .chip-combobox__floating-label {
    @apply top-0 -translate-y-1/2 scale-75 rounded-md bg-cc-blue-dark text-cc-blue-text-light;
  }

  .pending-class-form .chip-combobox__listbox {
    @apply z-[500] min-w-full max-w-[18rem] border-cc-blue-text/35 bg-cc-black-dark/95;
  }

  .pending-class-form .ct-chip {
    @apply min-w-0 max-w-[calc(100%-0.5rem)] border-cc-blue-text/35 bg-cc-blue-medium/25 text-text-primary;
  }

  .pending-class-form .chip-combobox--multi-chip .ct-chip {
    max-width: 100%;
  }

  .pending-class-form .chip-combobox--has-chips .chip-combobox__input {
    flex: 0 1 0.25rem;
    width: 0.25rem;
  }

  .pending-class-form .ct-chip__label {
    @apply min-w-0 truncate;
  }

  .pending-class-form .chip-combobox__toggle {
    @apply text-cc-blue-text hover:text-text-primary;
  }

  .scheduled-course-details-modal {
    --scd-form-bg: #14264A;
    --scd-field-bg: color-mix(in srgb, #080F21 25%, #14264A);
  }

  .scheduled-course-details-modal .scd-class-size {
    --scd-form-bg: color-mix(in srgb, #080F21 20%, #14264A);
    --scd-field-bg: color-mix(in srgb, #080F21 25%, var(--scd-form-bg));
  }

  .scheduled-course-details-modal .scd-float-field {
    @apply relative min-w-0;
  }

  .scheduled-course-details-modal .scd-float-field:focus-within {
    --scd-field-bg: color-mix(in srgb, #080F21 35%, var(--scd-form-bg));
  }

  .scheduled-course-details-modal .scd-field-shell {
    @apply flex min-h-12 min-w-0 items-center gap-2.5 overflow-visible rounded-lg
           border border-cc-blue-text/25 bg-cc-black-dark/25 px-3.5
           shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]
           transition-colors focus-within:border-cc-blue-light focus-within:bg-cc-black-dark/35
           focus-within:ring-1 focus-within:ring-cc-gold/45;
  }

  .scheduled-course-details-modal .scd-field-shell .chip-combobox {
    @apply min-w-0 flex-1;
    width: auto;
    max-width: 100%;
  }

  .scheduled-course-details-modal .scd-floating-label {
    @apply pointer-events-none absolute z-10 ml-0 origin-[0] px-1.5 font-special
           text-base font-semibold leading-4 text-text-muted
           left-3 top-1/2 -translate-y-1/2 scale-100
           duration-300;
    background-color: transparent;
    transition-property: top, left, transform, color, background;
  }

  .scheduled-course-details-modal .scd-float-field--with-icon .scd-floating-label {
    left: 2.85rem;
  }

  .scheduled-course-details-modal .scd-float-field--textarea .scd-floating-label {
    top: 0.85rem;
    transform: translateY(0) scale(1);
  }

  .scheduled-course-details-modal .scd-float-field:focus-within .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field:has(.chip-combobox--has-chips) .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field:has(.chip-combobox__input:not(:placeholder-shown)) .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field:has(.scd-input:not(:placeholder-shown)) .scd-floating-label {
    top: 0;
    left: 0.75rem;
    transform: translateY(-50%) scale(0.75);
    color: theme("colors.cc-blue-text-light");
    background: linear-gradient(
      to bottom,
      var(--scd-form-bg) 48%,
      var(--scd-field-bg) 52%
    );
  }

  .scheduled-course-details-modal .scd-field-icon {
    @apply inline-flex h-6 w-6 shrink-0 items-center justify-center text-text-muted;
  }

  .scheduled-course-details-modal .scd-field-icon svg {
    @apply h-5 w-5;
  }

  .scheduled-course-details-modal .chip-combobox__field {
    @apply min-h-0 min-w-0 rounded-none bg-transparent px-0;
  }

  .scheduled-course-details-modal .chip-combobox__input {
    @apply min-w-0 text-base font-medium text-text-primary placeholder:text-transparent;
  }

  .scheduled-course-details-modal .chip-combobox--has-chips .chip-combobox__input {
    flex: 0 1 1ch;
    min-width: 0;
    width: 1ch;
  }

  .scheduled-course-details-modal .chip-combobox__toggle {
    @apply h-5 w-5 shrink-0 text-text-secondary hover:text-text-primary;
  }

  .scheduled-course-details-modal .scd-float-field--always .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field--hint .scd-floating-label {
    top: 0;
    left: 0.75rem;
    transform: translateY(-50%) scale(0.75);
    color: theme("colors.cc-blue-text-light");
    background: linear-gradient(
      to bottom,
      var(--scd-form-bg) 48%,
      var(--scd-field-bg) 52%
    );
  }

  .scheduled-course-details-modal .scd-float-field--hint .scd-floating-label {
    opacity: 0;
  }

  .scheduled-course-details-modal .scd-float-field--hint:hover .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field--hint:focus-within .scd-floating-label,
  .scheduled-course-details-modal .scd-float-field--hint:has(.scd-input:not(:placeholder-shown)) .scd-floating-label {
    opacity: 1;
  }

  .scheduled-course-details-modal .scd-float-field--hint .scd-input {
    @apply placeholder:text-xs placeholder:font-normal placeholder:text-text-muted;
  }

  .scheduled-course-details-modal .ct-chip {
    @apply rounded-md border-cc-blue-text/30 bg-cc-blue-medium/25 px-2 py-0.5 text-sm font-medium text-text-primary;
  }

  .scheduled-course-details-modal .chip-combobox__listbox {
    @apply z-[300];
  }

  .scheduled-course-details-modal .scd-input {
    @apply min-h-12 rounded-lg border border-cc-blue-text/25 bg-cc-black-dark/25 px-3.5 py-2.5 text-base
           font-medium text-text-primary placeholder:text-transparent shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]
           focus:border-cc-blue-light focus:bg-cc-black-dark/35 focus:outline-none
           focus:ring-1 focus:ring-cc-gold/45;
  }

  .scheduled-course-details-modal .scd-detail-row {
    @apply flex gap-3 py-3;
  }

  .scheduled-course-details-modal .scd-detail-icon {
    @apply mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center text-text-muted;
  }

  .scheduled-course-details-modal .scd-detail-icon svg {
    @apply h-5 w-5;
  }

  .scheduled-course-details-modal .scd-detail-label {
    @apply font-special text-sm font-semibold leading-5 text-cc-blue-text;
  }

  .scheduled-course-details-modal .scd-detail-value {
    @apply mt-1 leading-5 text-text-secondary;
  }

  .pending-class-form
    .chip-combobox[data-chip-combobox-multiple-value="false"].chip-combobox--has-chips
    .chip-combobox__input {
    flex: 0 1 1ch;
    min-width: 0;
    width: 1ch;
  }

  .pending-class-form .chip-combobox__listbox {
    z-index: 720;
    min-width: 16rem;
    max-width: min(28rem, 80vw);
  }

  .timetable-filter-help-chips {
    @apply flex flex-wrap gap-1.5 rounded-md border border-cc-blue-medium/30
           bg-cc-black-dark/60 p-2;
  }

  @media (prefers-reduced-motion: reduce) {
    .timetable-filter:not(.is-open) .timetable-filter__inner {
      transition: none;
    }
  }

  /* Class-size badge states: under max, at max, 1/2/3+ over (reusable themes) */
  .class-size-info {
    @apply inline-flex shrink-0 items-center rounded-none rounded-tl-md rounded-br-md px-1 py-px text-[10px] font-medium leading-none ring-1;
  }

  .class-size-default {
    @apply bg-cc-black-dark/30 ring-cc-blue-text/20;
  }
  .class-size-default span {
    @apply text-cc-blue-text-light;
  }
  .class-size-at-max {
    @apply bg-cc-green-at-max-bg/95 ring-cc-green-light/40;
  }
  .class-size-at-max span {
    @apply text-cc-green-at-max-text font-medium;
  }
  .class-size-over-1 {
    @apply bg-cc-red-medium-light ring-cc-red-text/40;
  }
  .class-size-over-1 span {
    @apply text-white;
  }
  .class-size-over-2 {
    @apply bg-cc-red-medium ring-cc-red-text/40;
  }
  .class-size-over-2 span {
    @apply text-white;
  }
  .class-size-over-3 {
    @apply bg-cc-red-dark ring-cc-red-text/40;
  }
  .class-size-over-3 span {
    @apply text-white font-semibold;
  }

  .invalid-dropzone {
    @apply opacity-50;
    scale: 0.99;
  }
  .sc-placeholder {
    @apply opacity-30;
  }
  .beveled-card {
    @apply relative rounded-md;
  }

  .beveled-card::before {
    content: "";
    @apply absolute inset-0 opacity-50 rounded-md;
    z-index: -1;
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.2),
      inset 1px 1px 1px rgba(255, 255, 255, 0.35),
      inset 1px 1px 1px rgba(59, 130, 246, 0.2);
  }

  .beveled-card.scheduled-block::before {
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.2),
      inset 1px 1px 2px rgba(255, 255, 255, 0.5),
      inset 1px 1px 2px rgba(107, 114, 128, 0.35);
  }

  .scheduled-block .course-code-full-hover,
  .scheduled-block .teacher-name-full-hover,
  .scheduled-block .room-num-full-hover {
    @apply bg-gradient-to-br from-gray-500 to-gray-400;
  }

  .teacher-label--has-hover:hover .teacher-label-name-truncated,
  .teacher-label--has-hover:focus-within .teacher-label-name-truncated {
    @apply opacity-0;
  }

  .teacher-label--has-hover:hover .teacher-label-name-full-hover,
  .teacher-label--has-hover:focus-within .teacher-label-name-full-hover {
    @apply opacity-100;
  }

  .room-label--has-hover:hover .room-label-name-truncated,
  .room-label--has-hover:focus-within .room-label-name-truncated {
    @apply opacity-0;
  }

  .room-label--has-hover:hover .room-label-name-full-hover,
  .room-label--has-hover:focus-within .room-label-name-full-hover {
    @apply opacity-100;
  }

  .department-label--has-hover:hover .department-label-name-truncated,
  .department-label--has-hover:focus-within .department-label-name-truncated {
    @apply opacity-0;
  }

  .department-label--has-hover:hover .department-label-name-full-hover,
  .department-label--has-hover:focus-within .department-label-name-full-hover {
    @apply opacity-100;
  }

  /*
   * Conflict yield sits in an overlay, not the text flex flow. Hidden by default
   * (no layout cost). When a conflict is marked, indent only that field ~12px so
   * the truncated name/room stay readable. Gold text is the zero-width signal so
   * the icon can stay tiny on the condensed teacher+room line.
   */
  .conflict-jump {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
  }

  .conflict-jump:hover,
  .conflict-jump:focus-visible {
    transform: translateY(-50%) scale(1.15);
  }

  .scheduled-course-card-face .teacher-name.conflict,
  .scheduled-course-card-face .teacher-name.potential-conflict,
  .scheduled-course-card-face .room-num.conflict,
  .scheduled-course-card-face .room-num.potential-conflict {
    @apply pl-3 text-cc-gold;
  }

  /*
   * Class-size chip sits in the room slot (same meta row, no extra height)
   * when rooms are hidden. Only when a room is also visible does it become
   * the bottom-right corner tab under the room.
   */
  .sc-card-meta .class-size-info:not(.hidden) {
    @apply relative z-[5] ml-auto shrink-0 rounded-md;
  }

  .scheduled-course-card-face:has(.room-num:not(.hidden)) .class-size-info:not(.hidden) {
    @apply absolute bottom-0 right-0 z-[5] ml-0 rounded-none rounded-tl-md rounded-br-md;
  }

  .scheduled-course-card-face:has(.room-num:not(.hidden)):has(.class-size-info:not(.hidden)) {
    padding-bottom: 0.875rem;
  }

  .scheduled-course:has(.room-num:not(.hidden)):has(.class-size-info:not(.hidden))
    > div.absolute.bottom-1.right-0\.5 {
    bottom: 0.85rem;
  }

  .scheduled-block .hw-combobox__input:hover,
  .scheduled-block input[type="text"]:hover,
  .scheduled-block select:hover {
    @apply bg-gray-400/40;
  }

  .scheduled-block .hw-combobox__input:focus,
  .scheduled-block input[type="text"]:focus,
  .scheduled-block select:focus {
    @apply ring-gray-400;
  }

  .focus-ts {
    @apply shadow-[0_25px_50px_-12px_rgba(59,130,246,0.25)] scale-105 rounded-md ring-opacity-20 ring-inset ring-1 ring-cc-blue-text-lighter;
  }

  /* Note indicator for scheduled courses with notes — frames the top-right edit tab. */
  .note-indicator {
    @apply pointer-events-none absolute inset-0 z-0 rounded-tr-md rounded-bl-md
           border-[1.5px] border-cc-gold ring-1 ring-cc-gold backdrop-filter backdrop-blur-sm;
  }

  /*
   * Thin scheduled course card: teacher + room + class size rows hidden (.hidden from server or prefs JS).
   * Non-classroom cards have no .class-size-info; :not(:has(.class-size-info:not(.hidden))) still matches.
   * Scheduled blocks keep a top-right ellipsis edit; vertically center it on one-line cards.
   * Regular cards keep the pencil nested in the top-right corner.
   */
  .scheduled-course:has(.teacher-name.hidden):has(.room-num.hidden):not(
      :has(.class-size-info:not(.hidden))
    )
    > div.absolute.top-1.right-0 {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 20;
  }

  .scheduled-course:has(.teacher-name.hidden):has(.room-num.hidden):not(
      :has(.class-size-info:not(.hidden))
    )
    [id$="-course-code"] {
    padding-right: 1.25rem;
  }

  .scheduled-course:has([id$="-modal-button"].is-always-visible) [id$="-course-code"] {
    padding-right: 1.25rem;
  }

  /*
   * Scheduled course form: delete is a later sibling with z-100 like the fieldset, so it painted
   * on top of the open list. When the course combobox is expanded, lift the fieldset and drop the delete.
   */
  form:has([data-hw-combobox-target="combobox"][aria-expanded="true"])
    fieldset.hw-combobox {
    z-index: 200;
  }

  form:has([data-hw-combobox-target="combobox"][aria-expanded="true"])
    .sc-form-delete {
    z-index: 0;
  }

  form:has(.chip-combobox [aria-expanded="true"]) {
    z-index: 200;
  }
}

@layer components {
  .stats-nav-item.is-selected {
    @apply bg-cc-blue-medium/20;
  }

  .stats-nav-item.is-selected .stats-nav-badge {
    @apply bg-cc-blue-text/20 text-white;
  }

  .stats-nav-item.is-selected span.inline-flex {
    @apply bg-cc-blue-medium/45 text-white;
  }

  .stats-nav-item.is-selected span.block {
    @apply text-text-primary;
  }

  /*
   * Main app typography roles. These classes separate visual hierarchy from
   * h1-h6 semantics; heading tag migration belongs to the next pass.
   */
  .page-title {
    @apply font-special text-2xl font-semibold leading-tight tracking-tight text-text-accent;
  }

  .section-title {
    @apply font-special text-xl font-semibold leading-snug text-text-accent;
  }

  .panel-title {
    @apply font-special text-lg font-semibold leading-snug text-text-accent;
  }

  .subsection-title {
    @apply font-special text-base font-semibold leading-snug text-text-accent;
  }

  .sidebar-title {
    @apply font-special text-2xl font-semibold leading-7 text-text-accent;
  }

  .nav-section-label {
    @apply font-special text-lg font-semibold leading-6 text-text-secondary;
  }

  .nav-item {
    @apply font-special text-[17px] font-medium leading-6 text-text-primary;
  }

  .body-text {
    @apply font-sans text-sm font-normal leading-5 text-text-primary;
  }

  .body-secondary {
    @apply font-sans text-sm font-normal leading-5 text-text-secondary;
  }

  .body-muted {
    @apply font-sans text-sm font-normal leading-5 text-text-muted;
  }

  .form-label {
    @apply font-sans text-sm font-medium leading-5 text-text-secondary;
  }

  .control-label {
    @apply font-special text-sm font-semibold leading-none text-text-primary;
  }

  .caption-text {
    @apply font-sans text-xs font-normal leading-4 text-text-muted;
  }

  .metadata-label {
    @apply font-sans text-xs font-medium uppercase leading-4 tracking-wide text-text-muted;
  }

  .micro-text {
    @apply font-sans text-[11px] font-medium leading-4 text-text-muted;
  }

  .course-emphasis {
    @apply font-special text-base font-bold leading-6 text-text-accent;
  }

  .resource-list-active {
    @apply bg-cc-blue-medium/40;
  }

  .sidebar-hover-ring {
    @apply rounded-md ring-2 ring-inset ring-transparent transition-[box-shadow,background-color];
  }

  .sidebar-hover-ring:hover {
    @apply ring-cc-blue-medium;
  }

  #time-table-sidebar.collapsed {
    @apply w-16;
  }

  /* Flip the arrow direction when collapsed */
  #time-table-sidebar.collapsed .sidebar-collapse-toggle svg {
    @apply -scale-x-100;
  }

  .collapsed .sidebar-collapsible {
    @apply hidden;
  }

  .collapsed .sidebar-icon {
    @apply scale-125 my-1 mx-auto;
  }

  .collapsed .sidebar-view-container {
    @apply pl-0;
  }

  /*
   * Hover-reveal actions: avoid hidden + group-hover:block on the same node.
   * Scheduled courses use group/card on each card (not the label column wrapper).
   */
  .hover-reveal {
    @apply pointer-events-none invisible opacity-0 transition-opacity;
  }

  .scheduled-course.group\/card:hover .hover-reveal,
  .scheduled-course.group\/card:focus-within .hover-reveal,
  .group:hover .hover-reveal,
  .group:focus-within .hover-reveal {
    @apply pointer-events-auto visible opacity-100;
  }

  .hover-reveal.is-always-visible {
    @apply pointer-events-auto visible opacity-100;
  }

  #sidebar-footer {
    @apply overflow-visible;
  }

  /* Sidebar footer avatar menu (secondary timetables) */
  .sidebar-user-toggle {
    @apply sr-only;
  }

  .sidebar-user-toggle:checked ~ label[for="dropdownToggle"] {
    @apply ring-cc-blue-medium;
  }

  .sidebar-user-menu {
    @apply hidden absolute bottom-[calc(100%+0.5rem)] left-0 z-[550] w-32 rounded-lg bg-cc-black-darkest p-1 shadow-lg;
  }

  .sidebar-user-toggle:checked ~ .sidebar-user-menu {
    @apply block;
  }

  #time-table-sidebar.collapsed .sidebar-user-menu {
    @apply bottom-2 left-[calc(100%+0.5rem)] w-44;
  }

  .btn-primary {
    @apply font-special py-2 px-4 bg-cc-blue-medium rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-primary:active {
    @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
  }
  .btn-primary:hover {
    @apply cursor-pointer;
  }
  .btn-primary:focus,
  .btn-primary:hover {
    @apply bg-cc-blue-medium-light ring-2 ring-cc-blue-light outline-none;
  }

  .btn-disabled {
    @apply font-special py-2 px-4 bg-cc-gray-medium text-cc-gray-light rounded-md font-semibold opacity-70 cursor-not-allowed;
  }

  .btn-medium {
    @apply font-special py-2 px-4 bg-cc-blue-medium rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-medium:active {
    @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
  }
  .btn-medium:hover {
    @apply cursor-pointer;
  }
  .btn-medium:focus,
  .btn-medium:hover {
    @apply bg-cc-blue-medium-light ring-2 ring-cc-blue-light outline-none;
  }

  .btn-medium-green {
    @apply font-special py-1 px-4 bg-cc-green-dark rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-medium-green:active {
    @apply bg-cc-green-medium shadow-inner ring-2 ring-cc-green-medium scale-95;
  }
  .btn-medium-green:hover {
    @apply cursor-pointer;
  }
  .btn-medium-green:focus,
  .btn-medium-green:hover {
    @apply bg-cc-green-medium ring-2 ring-cc-green-medium outline-none;
  }

  .btn-medium-blue {
    @apply font-special py-1 px-2 bg-cc-blue-text-light text-cc-blue-medium rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-medium-blue:active {
    @apply bg-cc-blue-text-lighter shadow-inner ring-2 ring-cc-blue-text-lighter scale-95;
  }
  .btn-medium-blue:hover {
    @apply cursor-pointer;
  }
  .btn-medium-blue:focus,
  .btn-medium-blue:hover {
    @apply bg-cc-blue-text-lighter ring-2 ring-cc-blue-light outline-none;
  }

  .btn-medium-gray {
    @apply font-special py-1 px-2 bg-gray-300 text-gray-700 rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-medium-gray:active {
    @apply bg-gray-200 shadow-inner ring-2 ring-gray-200 scale-95;
  }
  .btn-medium-gray:hover {
    @apply cursor-pointer;
  }
  .btn-medium-gray:focus,
  .btn-medium-gray:hover {
    @apply bg-gray-200 ring-2 ring-gray-300 outline-none;
  }

  .btn-medium-red {
    @apply font-special py-2 px-4 bg-cc-red-medium-light text-cc-blue-text-lighter rounded-md font-semibold outline-none
           transition-[background-color,box-shadow,transform] duration-75;
  }
  .btn-medium-red:active {
    @apply bg-cc-red-light shadow-inner ring-2 ring-cc-red-light scale-95;
  }
  .btn-medium-red:hover {
    @apply cursor-pointer;
  }
  .btn-medium-red:focus,
  .btn-medium-red:hover {
    @apply bg-cc-red-light ring-2 ring-cc-red-light outline-none;
  }

  .input-field {
    @apply bg-cc-black-dark text-cc-gray-light py-1 px-4 rounded-lg transition-colors duration-150 appearance-none;
    &:focus {
      @apply ring-cc-blue-light;
    }
    &:hover,
    &:focus,
    &:not(:placeholder-shown) {
      @apply bg-cc-blue-dark;
    }
  }

  .floating-label {
    @apply absolute bg-cc-black-dark duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] px-2 start-1
    peer-focus:px-2 peer-focus:rounded-xl peer-focus:bg-cc-blue-dark peer-focus:scale-75 peer-focus:-translate-y-5 peer-focus:top-2
    peer-hover:bg-cc-blue-dark
    peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-placeholder-shown:scale-100
    peer-[:not(:placeholder-shown)]:bg-cc-blue-dark
    rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto;
  }

  .static-floating-label {
    @apply absolute scale-75 -top-3 z-10 origin-[0] px-1 start-1;
    background: linear-gradient(
      to bottom,
      theme("colors.cc-black-dark") 50%,
      theme("colors.cc-blue-dark") 50%
    );
  }

  .modal-floating-label {
    @apply absolute scale-75 -top-3 z-10 origin-[0] px-1.5 start-1;
    background: linear-gradient(
      to bottom,
      theme("colors.surface.modal") 50%,
      theme("colors.cc-blue-dark") 50%
    );
  }

  .schools-manage-transfer-dialog,
  .cc-schools-transfer-dialog {
    margin: auto;
  }

  .schools-manage-transfer-dialog::backdrop,
  .cc-schools-transfer-dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
  }

  .schools-manage-section--school,
  .cc-schools-section--school {
    @apply border-cc-green-medium/25 bg-cc-black-dark/70;
  }

  .schools-manage-section--timetables,
  .cc-schools-section--timetables {
    @apply border-[#9b7bdb]/25 bg-cc-black-dark/70;
  }

  .schools-manage-tt.open,
  .cc-schools-tt[open] {
    overflow: visible;
  }

  .schools-manage-tt-people,
  .cc-schools-tt-people {
    @apply relative z-20 overflow-visible;
  }

  .cc-schools-head {
    @apply flex relative gap-4 justify-between items-start px-5 py-3 border-b shrink-0 border-divider-subtle/70 bg-surface;
  }

  .cc-schools-head-text {
    @apply pr-4 min-w-0;
  }

  .cc-schools-title {
    @apply text-3xl font-semibold leading-8 font-special text-cc-blue-text m-0;
  }

  .cc-schools-close {
    @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-white/10 hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .cc-schools-close svg {
    @apply w-5 h-5;
  }

  .cc-schools-layout {
    @apply flex min-h-0 flex-1 overflow-hidden bg-surface-modal;
  }

  .cc-schools-sidebar {
    @apply flex min-h-0 w-[min(17rem,34%)] shrink-0 flex-col border-r border-divider-subtle/60 px-3 py-4;
  }

  .cc-schools-sidebar-head {
    @apply mb-3 shrink-0 px-1;
  }

  .cc-schools-sidebar-title {
    @apply text-xs font-semibold uppercase tracking-wide text-text-muted m-0;
  }

  .cc-schools-list {
    @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-0.5 m-0 p-0 list-none;
  }

  .cc-schools-list-link {
    @apply block rounded-md px-2.5 py-2 text-left no-underline transition-colors hover:bg-cc-blue-medium/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70 text-inherit;
  }

  .cc-schools-list-link.is-selected {
    @apply bg-cc-blue-medium/50;
  }

  .cc-schools-list-title {
    @apply block truncate text-sm font-semibold text-text-primary;
  }

  .cc-schools-list-meta {
    @apply mt-0.5 block truncate text-xs text-text-muted;
  }

  .cc-schools-sidebar-footer {
    @apply mt-3 shrink-0 border-t border-divider-subtle/60 px-1 pt-3;
  }

  .cc-schools-pane {
    @apply modal-scroll-fade relative flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto;
  }

  .cc-schools-muted {
    @apply p-5 text-sm text-text-muted m-0;
  }

  .cc-schools-empty {
    @apply flex flex-col gap-3 p-5;
  }

  .cc-schools-empty .cc-schools-muted {
    @apply p-0;
  }

  .cc-schools-btn {
    @apply w-fit inline-flex text-sm;
  }

  .cc-schools-btn-quiet {
    @apply opacity-80 hover:opacity-100;
  }

  .cc-schools-detail {
    @apply flex flex-col gap-6 p-5;
  }

  .cc-schools-detail-heading {
    @apply flex flex-wrap items-start justify-between gap-3;
  }

  .cc-schools-detail-title {
    @apply font-special text-2xl font-semibold leading-7 text-cc-blue-text m-0;
  }

  .cc-schools-detail-short {
    @apply mt-0.5 text-sm font-medium text-text-muted;
  }

  .cc-schools-alert {
    @apply rounded-md border border-cc-red-medium/30 bg-cc-red-medium/10 px-3 py-2 text-sm text-cc-red-text m-0;
  }

  .cc-schools-section {
    @apply rounded-xl border p-4;
  }

  .cc-schools-section-head {
    @apply mb-4 flex flex-wrap items-start justify-between gap-3;
  }

  .cc-schools-section-badge {
    @apply mb-2.5;
  }

  .cc-schools-section-title {
    @apply text-lg font-semibold text-text-primary m-0;
  }

  .cc-schools-lede {
    @apply mt-0.5 text-sm text-text-muted;
  }

  .cc-schools-count {
    @apply text-sm font-medium text-text-muted;
  }

  .cc-schools-invite {
    @apply mb-3 rounded-lg border border-divider-subtle/70 bg-surface/30 p-3;
  }

  .cc-schools-invite-actions {
    @apply mt-2 flex justify-end;
  }

  .cc-schools-people {
    @apply divide-y divide-divider-subtle/50 rounded-lg border border-divider-subtle/70 m-0 p-0 list-none;
  }

  .cc-schools-person {
    @apply flex items-center gap-3 px-3 py-2.5;
  }

  .cc-schools-person-info {
    @apply min-w-0 flex-1;
  }

  .cc-schools-person-name-line {
    @apply flex flex-wrap items-center gap-1.5;
  }

  .cc-schools-person-name {
    @apply truncate text-sm font-semibold text-text-primary;
  }

  .cc-schools-person-email {
    @apply truncate text-xs text-text-muted m-0;
  }

  .cc-schools-person-role {
    @apply shrink-0;
  }

  .cc-schools-empty-row {
    @apply px-3 py-4 text-sm text-text-muted;
  }

  .cc-schools-empty-box {
    @apply rounded-lg border border-dashed border-divider-subtle/70 px-3 py-4 text-sm text-text-muted m-0;
  }

  .cc-schools-tt-list {
    @apply flex flex-col gap-2 overflow-visible;
  }

  .cc-schools-tt {
    @apply relative z-10 rounded-lg border border-divider-subtle/70 bg-surface/30;
  }

  .cc-schools-tt[open] {
    @apply z-30 bg-surface/50 overflow-visible;
  }

  .cc-schools-tt-summary {
    @apply flex cursor-pointer list-none items-center gap-2 px-3 py-2.5;
  }

  .cc-schools-tt-summary::-webkit-details-marker {
    display: none;
  }

  .cc-schools-tt-chevron {
    @apply h-3.5 w-3.5 shrink-0 text-text-muted transition-transform;
  }

  .cc-schools-tt[open] .cc-schools-tt-chevron {
    @apply rotate-90;
  }

  .cc-schools-tt-summary-text {
    @apply min-w-0 flex-1;
  }

  .cc-schools-tt-summary-line {
    @apply flex flex-wrap items-center gap-2;
  }

  .cc-schools-tt-name {
    @apply truncate text-sm font-semibold text-text-primary;
  }

  .cc-schools-kind {
    @apply rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide;
  }

  .cc-schools-kind--elementary {
    @apply bg-emerald-500/15 text-emerald-700;
  }

  .cc-schools-kind--secondary {
    @apply bg-cc-blue-medium/30 text-cc-blue-text;
  }

  .cc-schools-tt-meta {
    @apply text-xs text-text-muted m-0;
  }

  .cc-schools-tt-body {
    @apply relative z-20 overflow-visible border-t border-divider-subtle/60 px-3 py-3;
  }

  .cc-schools-tt-lede {
    @apply mb-2 mt-0;
  }

  .cc-schools-tt-share {
    @apply mt-2;
  }

  .cc-schools-tt-people-head {
    @apply mb-2 flex items-baseline justify-between gap-2 px-1;
  }

  .cc-schools-tt-perm-label {
    @apply text-[11px] font-medium text-text-muted;
  }

  .cc-schools-tt-people {
    @apply divide-y divide-divider-subtle/40 overflow-visible rounded-lg border border-divider-subtle/60 m-0 p-0 list-none;
  }

  .cc-schools-actions {
    @apply flex flex-col gap-3 border-t border-divider-subtle/60 pt-4;
  }

  .cc-schools-disabled-action {
    @apply flex w-fit flex-col gap-1;
  }

  .cc-schools-disabled-action .cc-schools-muted {
    @apply p-0;
  }

  .cc-schools-btn-disabled {
    @apply cursor-not-allowed opacity-50 pointer-events-none;
  }

  .cc-schools-delete-confirm {
    @apply mt-4 space-y-3 rounded-lg border border-cc-red-medium/30 bg-surface/50 p-4;
  }

  .cc-schools-delete-confirm .cc-schools-muted {
    @apply p-0;
  }

  .cc-schools-delete-form {
    @apply space-y-3;
  }

  .cc-schools-delete-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .cc-schools-transfer-dialog {
    @apply w-[min(28rem,calc(100vw-2rem))] rounded-xl border border-divider-subtle bg-surface-modal p-0 text-text-primary shadow-xl backdrop:bg-black/50;
  }

  .cc-schools-transfer-head {
    @apply border-b border-divider-subtle/70 px-5 py-4;
  }

  .cc-schools-transfer-title {
    @apply font-special text-xl font-semibold text-cc-blue-text m-0;
  }

  .cc-schools-transfer-head .cc-schools-lede {
    @apply mt-1;
  }

  .cc-schools-strong {
    @apply font-medium text-text-secondary;
  }

  .cc-schools-transfer-body {
    @apply space-y-3 px-5 py-4 text-sm text-text-muted;
  }

  .cc-schools-transfer-warn {
    @apply rounded-md border border-cc-gold/30 bg-cc-gold/10 px-3 py-2 text-cc-blue-text m-0;
  }

  .cc-schools-transfer-form {
    @apply space-y-3;
  }

  .cc-schools-transfer-actions {
    @apply flex flex-wrap justify-end gap-2 pt-1;
  }

  .cc-schools-field {
    @apply relative w-full block text-sm;
  }

  .cc-schools-field-label {
    @apply mb-1 block text-xs font-semibold uppercase tracking-wide text-text-muted;
  }

  .cc-schools-floating-label {
    @apply absolute scale-75 -top-3 z-10 origin-[0] px-1.5 start-1;
    background: linear-gradient(
      to bottom,
      theme("colors.surface.modal") 50%,
      theme("colors.cc-blue-dark") 50%
    );
  }

  .cc-schools-editor {
    @apply flex flex-col gap-4 p-5;
  }

  .cc-schools-editor-title {
    @apply font-special text-xl font-semibold text-cc-blue-text m-0;
  }

  .cc-schools-editor-form {
    @apply flex w-full max-w-sm flex-col space-y-4;
  }

  .cc-schools-editor-actions {
    @apply flex flex-wrap items-center gap-2 pt-1;
  }

  .cc-schools-loading {
    @apply items-center gap-2 text-cc-gray-light;
  }

  .cc-share-compact-row {
    @apply flex items-center gap-3 px-3 py-2;
  }

  .cc-share-compact-info {
    @apply min-w-0 flex-1;
  }

  .cc-share-compact-name-line {
    @apply flex flex-wrap items-center gap-1.5;
  }

  .cc-share-compact-name {
    @apply truncate text-sm font-medium text-text-primary m-0;
  }

  .cc-share-compact-email {
    @apply truncate text-xs text-text-muted m-0;
  }

  .cc-share-compact-badge {
    @apply hidden shrink-0 sm:block;
  }

  .cc-share-badge--prominent {
    @apply gap-2 rounded-lg border-2 px-3 py-2 shadow-sm;
  }

  .cc-share-badge--prominent.cc-share-badge--school {
    @apply border-cc-green-medium/50 bg-cc-green-dark/35;
  }

  .cc-share-badge--prominent.cc-share-badge--timetable {
    @apply border-[#9b7bdb]/55 bg-[#3b2a63]/70;
  }

  .cc-share-badge--prominent .cc-share-badge-icon {
    @apply mt-0 h-5 w-5;
  }

  .cc-share-badge--prominent .cc-share-badge-title {
    @apply text-sm font-bold leading-tight tracking-wide;
  }

  .cc-share-badge--prominent .cc-share-badge-sub {
    @apply text-xs;
  }

  /* HW-COMBOBOX STYLING*/

  /* .hw-combobox__input {
    @apply bg-cc-black-dark text-cc-gray-light py-1 px-4 rounded-lg transition-colors duration-150 appearance-none outline-none;
  }
  .hw-combobox__input:focus {
    @apply ring-cc-blue-light;
  }
  .hw-combobox__handle {
    @apply white-dropdown-arrow;
  }
  .hw-combobox__handle::before {
    display: none;
  }
  .hw-combobox__main__wrapper:focus-within {
    @apply w-full;
  }
  .hw-combobox__main__wrapper:focus-within {
    @apply w-full;
  } */

  .presence-avatar {
    @apply overflow-hidden self-center h-6 w-6 shrink-0 rounded-full ring-1 ring-cc-blue-light;
  }

  .avatar-backup {
    @apply relative h-full w-full overflow-hidden rounded-full bg-cc-black-darkest;
  }

  .avatar-backup::before {
    content: "";
    @apply absolute top-[2px] left-1/2 transform -translate-x-1/2 w-1/2 h-1/2 bg-gray-300 rounded-full;
  }

  .avatar-backup::after {
    content: "";
    @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 w-10/12 h-1/3 bg-gray-300 rounded-t-full;
  }

  /* Secondary timetable top bar + share modal (mirrors elementary el-* layout) */
  .cc-top-strip {
    @apply flex items-center justify-between gap-12 h-11 px-3.5 shrink-0 sticky top-0 z-[600] bg-cc-black-darkest border-b border-cc-blue-medium/40;
  }

  .cc-top-strip-left {
    @apply flex min-w-0 flex-1 items-center gap-12;
  }

  .cc-top-strip-actions {
    @apply flex items-center gap-2.5 shrink-0 ml-auto;
  }

  .cc-top-brand {
    @apply relative flex items-center gap-2 shrink-0;
  }

  .cc-top-brand-trigger {
    @apply flex items-center gap-2 rounded-md border-0 bg-transparent
           p-0.5 -m-0.5 text-left text-inherit cursor-pointer
           focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .cc-top-brand-trigger[aria-expanded="true"] {
    @apply bg-white/10 ring-2 ring-cc-gold/70;
  }

  .cc-top-logo {
    @apply h-[26px] w-[26px] shrink-0 rounded-md;
  }

  .cc-top-brand-text {
    @apply flex flex-col leading-tight;
  }

  .cc-top-brand-name {
    @apply font-special text-[15px] font-semibold text-cc-gray-light;
  }

  .cc-top-brand-sub {
    @apply inline-flex items-center gap-0.5 font-special text-[11px] tracking-wide text-cc-gray-medium-light;
  }

  .cc-top-brand-chevron {
    @apply h-3 w-3 shrink-0 opacity-70;
  }

  .cc-top-brand-menu {
    @apply top-full min-w-[12rem];
  }

  .cc-top-context {
    @apply flex min-w-0 flex-1 items-center gap-2 font-special text-[15px] font-medium text-cc-gray-medium-light;
  }

  .cc-top-school {
    @apply font-medium text-cc-gray-light;
  }

  .cc-top-sep {
    @apply shrink-0 text-cc-gray-medium-light;
  }

  .cc-top-timetable {
    @apply text-cc-gray-medium-light;
  }

  .cc-top-timetable-cluster {
    @apply inline-flex max-w-full min-w-0 items-center;
  }

  .cc-top-timetable-cluster .cc-top-context-trigger {
    @apply min-w-0;
  }

  .cc-top-timetable-cluster .cc-top-context-trigger[aria-expanded="true"] {
    @apply bg-transparent ring-0;
  }

  .cc-top-timetable-cluster:has(.cc-top-context-trigger[aria-expanded="true"]) {
    @apply rounded bg-white/10 ring-2 ring-cc-gold/70;
  }

  /* Prefer full school/timetable names; only ellipsis when past the rem/vw cap.
     Avoid % max-width + flex min-w-0 + truncate (that circularly under-sizes labels). */
  .cc-top-context > .relative {
    @apply shrink-0;
  }

  .cc-top-context-trigger {
    @apply inline-block max-w-full whitespace-nowrap rounded px-1 -mx-0.5 border-0 bg-transparent p-0 m-0
           text-inherit cursor-pointer transition-colors align-middle
           focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .cc-top-context-trigger[aria-expanded="true"] {
    @apply bg-white/10 ring-2 ring-cc-gold/70;
  }

  .cc-top-context-label {
    @apply inline-block align-middle truncate;
    max-width: min(24rem, 40vw);
  }

  .cc-top-context-chevron-hit {
    @apply inline-flex shrink-0 cursor-pointer items-center justify-center;
  }

  .cc-top-context-chevron {
    @apply inline-block align-middle h-3.5 w-3.5 shrink-0 text-cc-gray-medium-light opacity-70 ml-0.5;
  }

  .cc-top-timetable-star {
    @apply inline-flex shrink-0 items-center justify-center rounded p-0.5 ml-0.5
           text-cc-gray-medium-light/75 transition-colors
           hover:text-cc-gold focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .cc-top-timetable-star.is-starred {
    @apply text-cc-gold hover:text-cc-gold;
  }

  .cc-top-timetable-star svg {
    @apply block h-4 w-4;
  }

  .cc-top-context-menu-star {
    @apply mr-1 inline-block shrink-0 align-[-0.05em] text-cc-gold;
  }

  .cc-top-context-menu {
    @apply absolute left-0 z-[620] mt-1 min-w-[16rem] max-w-[min(28rem,80vw)]
           max-h-[min(24rem,60vh)] overflow-y-auto rounded-lg border
           border-cc-blue-medium bg-cc-blue-dark/85 p-1 shadow-lg backdrop-blur-md;
  }

  .cc-top-context-menu--timetable {
    @apply flex flex-col overflow-hidden;
  }

  .cc-top-context-menu-list {
    @apply min-h-0 flex-1 overflow-y-auto;
  }

  .cc-top-context-menu-footer {
    @apply mt-1 shrink-0 border-t border-cc-blue-medium/50
           bg-cc-blue-dark/90 pt-1 backdrop-blur-md;
  }

  .cc-top-context-menu-item {
    @apply flex flex-col gap-0.5 w-full rounded-md px-3 py-2.5 text-left
           text-cc-blue-text no-underline hover:bg-cc-blue-medium;
  }

  .cc-top-context-menu-item-title {
    @apply flex min-w-0 max-w-full items-center text-sm font-semibold leading-5 text-cc-blue-text-light;
  }

  .cc-top-context-menu-item-title--with-icon {
    @apply inline-flex items-center gap-1.5;
  }

  .cc-top-context-menu-item-title--with-icon svg {
    @apply h-3.5 w-3.5 shrink-0;
  }

  .cc-top-context-menu-item-meta {
    @apply block truncate text-xs font-medium leading-4 text-cc-gray-medium-light;
  }

  .cc-top-context-menu-item.is-selected {
    @apply bg-cc-blue-medium/50;
  }

  .cc-top-context-menu-item.is-selected .cc-top-context-menu-item-title {
    @apply font-bold;
  }

  .cc-top-context-menu-row {
    @apply flex items-center gap-1 rounded-md;
  }

  .cc-top-context-menu-row:hover {
    @apply bg-cc-blue-medium;
  }

  .cc-top-context-menu-row.is-selected {
    @apply bg-cc-blue-medium/50;
  }

  .cc-top-context-menu-row.is-selected:hover {
    @apply bg-cc-blue-medium;
  }

  .cc-top-context-menu-row .cc-top-context-menu-item {
    @apply w-auto min-w-0 flex-1 hover:bg-transparent;
  }

  .cc-top-context-menu-row.is-selected .cc-top-context-menu-item-title {
    @apply font-bold;
  }

  .cc-top-context-menu-edit {
    @apply inline-flex shrink-0 items-center gap-1 rounded-md bg-cc-blue-medium px-2 py-1 mr-1
           text-xs font-semibold text-cc-gray-light no-underline
           hover:bg-cc-blue-medium-light focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-gold/70;
  }

  .cc-top-context-menu-divider {
    @apply my-1 border-t border-cc-blue-medium/50;
  }

  .cc-top-editable-name {
    @apply inline-flex max-w-full min-w-0;
  }

  .cc-top-editable-name__display {
    @apply cursor-text rounded px-1 -mx-1 whitespace-nowrap overflow-hidden text-ellipsis hover:bg-white/10;
  }

  .cc-top-editable-name__input {
    @apply text-inherit bg-cc-black-dark border border-cc-blue-light rounded px-1.5 -mx-1 min-w-[8ch] max-w-[min(280px,40vw)] outline-none text-[15px];
  }

  .cc-share-btn {
    @apply inline-flex items-center justify-center h-8 px-[18px] rounded-full border-0 bg-cc-blue-medium/40 text-cc-blue-text font-special text-[15px] font-medium no-underline cursor-pointer leading-none tracking-wide hover:bg-cc-blue-medium/60;
  }

  .cc-presence-avatars {
    @apply flex items-center mr-[18px];
  }

  .cc-presence-avatars:not(:has(.cc-user-avatar)) {
    @apply hidden;
  }

  .cc-presence-avatar-stack {
    @apply flex items-center;
  }

  .cc-presence-avatar-stack .cc-user-avatar {
    @apply border-2 border-cc-black-darkest -ml-2 relative overflow-hidden h-7 w-7 rounded-full shrink-0;
  }

  .cc-presence-avatar-stack .cc-user-avatar:first-child {
    @apply ml-0 z-[1];
  }

  .cc-presence-overflow {
    @apply inline-flex items-center justify-center min-w-7 h-7 -ml-2 px-2 rounded-full bg-cc-blue-dark text-cc-gray-medium-light text-[11px] font-semibold shrink-0 z-[6];
  }

  .cc-user {
    @apply relative;
  }

  .cc-user-toggle {
    @apply sr-only;
  }

  .cc-user--topbar .cc-user-trigger {
    @apply p-0.5 rounded-full;
  }

  .cc-user-trigger {
    @apply flex items-center gap-2.5 p-1.5 rounded-md cursor-pointer hover:bg-white/10;
  }

  .cc-user-avatar {
    @apply inline-flex w-8 h-8 rounded-full overflow-hidden shrink-0 bg-cc-black-dark;
  }

  .cc-user-avatar img,
  .cc-user-avatar .avatar-backup {
    @apply w-full h-full object-cover;
  }

  .cc-user-toggle:checked ~ .cc-user-menu {
    @apply flex;
  }

  .cc-user-menu {
    @apply hidden absolute top-[calc(100%+8px)] right-0 min-w-[200px] bg-cc-black-darkest border border-cc-blue-medium/40 rounded-[10px] shadow-lg p-1.5 z-[650] flex-col;
  }

  .cc-user-head {
    @apply block px-2.5 py-1.5 text-[13px] font-medium text-cc-gray-light border-b border-cc-blue-medium/30 mb-1;
  }

  .cc-user-link {
    @apply block w-full text-left px-2.5 py-1.5 text-[13px] text-cc-gray-light rounded-md no-underline hover:bg-cc-blue-dark;
  }

  .cc-user-link--btn {
    @apply border-0 bg-transparent cursor-pointer;
    font-family: inherit;
  }

  .cc-user-link--danger {
    @apply text-cc-red-light hover:bg-cc-red-medium/20;
  }

  .cc-modal-overlay {
    @apply fixed inset-0 bg-black/60 flex items-center justify-center z-[1000];
  }

  .cc-modal {
    @apply bg-cc-blue-dark text-cc-gray-light border border-cc-blue-medium/40 rounded-lg p-5 w-80 max-w-[calc(100vw-32px)] shadow-deep;
  }

  .cc-modal--share {
    @apply flex w-[min(95vw,760px)] max-w-[calc(100vw-32px)] flex-col overflow-visible rounded-lg border border-divider-subtle/70 bg-surface p-0 shadow-deep;
  }

  .cc-modal-head {
    @apply flex items-start justify-between gap-3 mb-3;
  }

  .cc-modal-head--share {
    @apply relative z-20 mb-0 shrink-0 items-center justify-between gap-4 rounded-t-lg border-b border-divider-subtle/70 bg-surface px-5 py-3;
  }

  .cc-modal-head-text {
    @apply min-w-0 flex-1 pr-2;
  }

  .cc-modal-head h2 {
    @apply text-base font-semibold m-0 text-cc-gray-light;
  }

  .cc-modal-head--share h2 {
    @apply font-special text-3xl font-semibold leading-8 text-cc-blue-text;
  }

  .cc-share-subtitle {
    @apply ml-1 mt-0.5 mb-0 min-w-0 truncate text-base font-semibold leading-5 text-text-secondary;
  }

  .cc-share-lede {
    @apply mb-3 text-sm leading-5 text-text-secondary;
  }

  .cc-share-help {
    @apply relative inline-flex shrink-0 align-middle;
  }

  .cc-share-help-btn {
    @apply inline-flex h-5 w-5 items-center justify-center rounded-full border-0 bg-transparent p-0 text-cc-blue-text cursor-pointer hover:bg-white/10 hover:text-cc-blue-text-light;
  }

  .cc-share-help-btn svg {
    @apply h-4 w-4;
  }

  .cc-share-help-tip {
    @apply pointer-events-none absolute left-1/2 top-full z-50 mt-2 w-80 -translate-x-1/2 rounded-md border border-cc-blue-text/30 bg-cc-blue-dark/95 px-3 py-2 text-left text-xs font-normal leading-5 text-text-secondary opacity-0 shadow-[0_8px_18px_rgba(8,15,33,0.4)] ring-1 ring-cc-blue-text/15;
  }

  .cc-share-help-tip .cc-share-badge {
    @apply mx-0.5 align-middle;
  }

  .cc-share-badge--compact {
    @apply items-center py-0.5;
  }

  .cc-share-badge--compact .cc-share-badge-icon {
    @apply mt-0;
  }

  .cc-share-help:hover .cc-share-help-tip,
  .cc-share-help:focus-within .cc-share-help-tip {
    @apply opacity-100;
  }

  .cc-modal-close {
    @apply border-0 bg-transparent p-1 rounded cursor-pointer text-cc-gray-light hover:bg-white/10 shrink-0;
  }

  .cc-modal-head--share .cc-modal-close {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-md p-0 text-text-secondary hover:bg-white/10 hover:text-text-primary;
  }

  .cc-modal-close svg {
    @apply w-5 h-5;
  }

  .cc-share-body {
    @apply relative z-10 flex min-h-0 flex-1 flex-col overflow-visible rounded-b-lg bg-surface-modal px-5 py-4;
  }

  .cc-modal-error {
    @apply text-cc-red-light text-xs mb-3;
  }

  .cc-share-invite {
    @apply mb-1;
  }

  .cc-share-invite-row {
    @apply flex items-stretch gap-2;
  }

  .cc-share-chip-field {
    @apply flex-1 min-w-0 flex flex-wrap items-center gap-1.5 rounded-lg border border-cc-blue-medium/50 bg-cc-black-dark px-2.5 py-2 min-h-[42px] cursor-text transition-[border-color,box-shadow];
  }

  .cc-share-chip-field:focus-within {
    @apply border-cc-blue-light ring-1 ring-inset ring-cc-blue-light;
  }

  .cc-share-invite-icon {
    @apply inline-flex h-4 w-4 shrink-0 text-cc-gray-medium-light;
  }

  .cc-share-invite-icon svg {
    @apply h-full w-full;
  }

  .cc-share-chips {
    @apply contents;
  }

  .cc-share-chip {
    @apply inline-flex items-center gap-1 max-w-full px-2 py-0.5 rounded-full bg-cc-blue-medium/30 text-cc-blue-text text-xs;
  }

  .cc-share-chip-label {
    @apply truncate;
  }

  .cc-share-chip-remove {
    @apply border-0 bg-transparent text-cc-gray-light cursor-pointer text-sm leading-none p-0 hover:text-cc-gray-light;
  }

  .cc-share-chip-input {
    @apply flex-1 min-w-[4ch] self-stretch border-0 bg-transparent p-0 text-[13px] leading-5 text-cc-gray-light shadow-none outline-none ring-0;
    appearance: none;
  }

  .cc-share-chip-input:focus,
  .cc-share-chip-input:focus-visible {
    @apply border-0 bg-transparent shadow-none outline-none ring-0;
  }

  .cc-share-chip-field:has(.cc-share-chip) .cc-share-chip-input::placeholder {
    color: transparent;
  }

  .cc-share-invite-hint {
    @apply mt-1.5 mb-0 hidden text-[11px] leading-4 text-cc-gray-medium-light;
  }

  .cc-share-invite:has(.cc-share-chip-field:focus-within) .cc-share-invite-hint {
    @apply block;
  }

  .cc-share-invite-row .cc-share-perm-wrap {
    @apply self-stretch;
  }

  .cc-share-invite-perm {
    @apply h-full min-w-[7.25rem] py-0 pl-3 pr-7 text-[13px];
  }

  .cc-modal-actions--share {
    @apply mt-4 flex justify-end;
  }

  .cc-share-primary-btn {
    @apply h-9 px-5 rounded-full border-0 bg-cc-blue-medium text-cc-gray-light text-[13px] font-medium cursor-pointer hover:bg-cc-blue-medium-light;
  }

  .cc-share-section {
    @apply relative z-20 mt-10 min-h-0 overflow-visible;
  }

  .cc-share-section-head,
  .cc-share-row {
    @apply grid w-full grid-cols-[minmax(0,3fr)_minmax(0,2fr)] items-center gap-x-4 px-1;
  }

  @media (min-width: 640px) {
    .cc-share-section-head,
    .cc-share-row {
      grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr);
    }
  }

  .cc-share-section-head {
    @apply relative z-30 mb-2 overflow-visible;
  }

  .cc-share-heading,
  .cc-share-row-person,
  .cc-share-col-label,
  .cc-share-row-through,
  .cc-share-row-role {
    @apply min-w-0;
  }

  .cc-share-heading {
    @apply m-0 text-left text-base font-semibold leading-6 text-cc-gray-light;
  }

  .cc-share-col-label {
    @apply hidden text-left text-[11px] font-medium text-cc-gray-medium-light sm:block;
  }

  .cc-share-col-label--access {
    @apply items-center gap-1 sm:inline-flex;
  }

  .cc-share-col-label--role {
    @apply text-left;
  }

  .cc-share-list {
    @apply relative list-none m-0 p-0 flex flex-col gap-0.5 max-h-[min(52vh,24rem)] overflow-y-auto;
  }

  .cc-share-row {
    @apply rounded-md py-2 hover:bg-cc-black-dark/60;
  }

  .cc-share-row-person {
    @apply flex min-w-0 flex-1 items-center gap-2.5;
  }

  .cc-share-row-avatar {
    @apply shrink-0 overflow-hidden h-9 w-9 rounded-full;
  }

  .cc-share-row-info {
    @apply flex min-w-0 flex-1 flex-col;
  }

  .cc-share-row-name-line {
    @apply flex min-w-0 items-center gap-1.5;
  }

  .cc-share-row-name {
    @apply truncate text-[13px] font-medium text-cc-gray-light;
  }

  .cc-share-you-badge {
    @apply shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide bg-cc-blue-medium/35 text-cc-blue-text;
  }

  .cc-share-row-email {
    @apply truncate text-[11px] text-cc-gray-medium-light;
  }

  .cc-share-row-unverified {
    @apply text-cc-gray-medium-light;
  }

  .cc-share-row-through {
    @apply hidden min-w-0 flex-col gap-1 pr-10 sm:flex;
  }

  .cc-share-badge {
    @apply inline-flex max-w-full items-start gap-1.5 rounded-md border px-1.5 py-1;
  }

  .cc-share-badge--school {
    @apply border-cc-green-medium/35 bg-cc-green-dark/25 text-cc-green-light;
  }

  .cc-share-badge--timetable {
    @apply border-[#9b7bdb]/40 bg-[#3b2a63]/55 text-[#d7c4ff];
  }

  .cc-share-badge-icon {
    @apply mt-0.5 inline-flex h-3.5 w-3.5 shrink-0;
  }

  .cc-share-badge-icon svg {
    @apply h-full w-full;
  }

  .cc-share-badge-text {
    @apply min-w-0 flex flex-col;
  }

  .cc-share-badge-title {
    @apply text-[11px] font-semibold leading-tight;
  }

  .cc-share-badge-sub {
    @apply truncate text-[10px] leading-tight opacity-80;
  }

  .cc-share-row-role {
    @apply flex min-w-0 items-center justify-start;
  }

  .cc-share-row-access {
    @apply flex items-center gap-1 shrink-0;
  }

  .cc-share-role-static {
    @apply inline-flex items-center gap-1 py-1 pr-2 text-xs text-cc-gray-medium-light;
  }

  .cc-share-role-lock {
    @apply h-3 w-3 shrink-0 opacity-80;
  }

  .cc-sr-only {
    @apply sr-only;
  }

  .cc-share-perm-form {
    @apply m-0;
  }

  .cc-share-perm-wrap {
    @apply relative inline-flex items-center;
  }

  .cc-share-perm-select {
    @apply appearance-none cursor-pointer rounded-md border border-cc-blue-medium/60 bg-cc-black-dark bg-none py-1.5 pl-2.5 pr-7 text-xs font-medium text-cc-gray-light hover:border-cc-blue-light hover:bg-cc-blue-dark;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .cc-share-perm-select::-ms-expand {
    display: none;
  }

  .cc-share-perm-select:focus {
    @apply border-cc-blue-light outline-none;
  }

  .cc-share-perm-wrap .cc-share-perm-chevron {
    @apply pointer-events-none absolute right-2 h-3.5 w-3.5 text-cc-gray-medium-light;
  }

  .cc-share-role-menu {
    @apply relative inline-flex items-center;
  }

  .cc-share-save-status {
    @apply ml-2 inline-flex shrink-0 items-center text-xs font-medium whitespace-nowrap text-cc-green-light;
    transition: opacity 400ms ease;
  }

  .cc-share-save-status[hidden] {
    display: none;
  }

  .cc-share-save-status.is-fading {
    opacity: 0;
  }

  .cc-share-save-spinner {
    @apply inline-block h-3.5 w-3.5 rounded-full border-2 border-cc-gray-medium-light border-r-transparent animate-spin;
  }

  @media (prefers-reduced-motion: reduce) {
    .cc-share-save-spinner {
      animation: none;
      border-right-color: theme("colors.cc-gray-medium-light");
      opacity: 0.7;
    }

    .cc-share-save-status {
      transition: none;
    }
  }

  .cc-share-perm-trigger {
    @apply inline-flex items-center gap-1 rounded-md border border-cc-blue-medium/60 bg-cc-black-dark py-1.5 pl-2.5 pr-2 text-xs font-medium text-cc-gray-light cursor-pointer hover:border-cc-blue-light hover:bg-cc-blue-dark disabled:cursor-wait disabled:opacity-70;
  }

  .cc-share-perm-trigger .cc-share-perm-chevron {
    @apply relative right-auto h-3.5 w-3.5 shrink-0 text-cc-gray-medium-light;
  }

  .cc-share-menu {
    @apply absolute left-0 top-[calc(100%+4px)] z-20 min-w-[10rem] rounded-md border border-cc-blue-medium/40 bg-cc-black-darkest p-1 shadow-lg;
  }

  .cc-share-menu-form {
    @apply m-0;
  }

  .cc-share-menu-item {
    @apply block w-full rounded-md border-0 bg-transparent px-2.5 py-1.5 text-left text-xs text-cc-gray-light cursor-pointer hover:bg-cc-blue-dark;
  }

  .cc-share-menu-item--current {
    @apply bg-cc-blue-dark/80 font-medium cursor-default;
  }

  .cc-share-menu-item:disabled {
    @apply cursor-default opacity-70;
  }

  .cc-share-menu-item--danger {
    @apply text-cc-red-light hover:bg-cc-red-medium/20;
  }

  .cc-share-menu-sep {
    @apply my-1 h-px bg-cc-blue-medium/40;
  }

  .cc-share-remove-form {
    @apply m-0;
  }

  .cc-share-remove {
    @apply flex items-center justify-center w-7 h-7 border-0 rounded-full bg-transparent text-cc-gray-medium-light cursor-pointer hover:bg-cc-red-medium/20 hover:text-cc-red-light;
  }

  .cc-share-remove svg {
    @apply w-4 h-4;
  }
}