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

@tailwind base;

:root {
  --primary: #080f21;
  --secondary: #b3d0ff;
}

/* 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-bold text-cc-blue-text;
  }
  h2 {
    @apply font-special text-3xl font-bold text-cc-blue-text;
  }
  h3 {
    @apply font-special text-2xl font-bold 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 opacity-95 bg-gradient-to-l from-cc-red-medium-light via-cc-red-light to-cc-red-medium-light;
  }

  .conflict {
    @apply opacity-95 bg-gradient-to-l from-cc-red-medium-light via-cc-red-light to-cc-red-medium-light;
  }

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

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

  .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 {
    @apply fixed left-60 top-2 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;
  }

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

  .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-default {
    @apply bg-gradient-to-br from-transparent to-cc-blue-medium-light;
  }
  .class-size-default span {
    @apply text-cc-gray-medium-light;
  }
  .class-size-at-max {
    @apply opacity-95 bg-cc-green-at-max-bg;
  }
  .class-size-at-max span {
    @apply text-cc-green-at-max-text font-medium;
  }
  .class-size-over-1 {
    @apply opacity-95 bg-gradient-to-l from-cc-red-medium-light via-cc-red-light to-cc-red-medium-light;
  }
  .class-size-over-1 span {
    @apply text-white;
  }
  .class-size-over-2 {
    @apply opacity-95 bg-gradient-to-l from-cc-red-medium via-cc-red-dark to-cc-red-medium;
  }
  .class-size-over-2 span {
    @apply text-white;
  }
  .class-size-over-3 {
    @apply opacity-95 bg-cc-red-dark;
  }
  .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-80 rounded-md;
    z-index: -1;
    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(59, 130, 246, 0.25);
  }

  .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 {
    @apply bg-gradient-to-br from-gray-500 to-gray-400;
  }

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

  .tbd-highlight {
    @apply opacity-85 rounded-b-md bg-gradient-to-l from-teal-600 via-teal-500 to-teal-600;
  }

  /* Note indicator for scheduled courses with notes */
  .note-indicator {
    @apply absolute -bottom-1 -right-0.5 w-5 h-6 border-[1.5px] border-cc-gold rounded-md backdrop-filter backdrop-blur-sm z-0 ring-1 ring-cc-gold;
  }

  /*
   * 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.
   * Edit is top-right and notes bottom-right in the DOM; both would overlap on a one-line card.
   * Reposition to vertical center: notes left, edit right.
   */
  .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))
    )
    > div.absolute.bottom-1.right-0\.5 {
    left: 0.125rem !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

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

  .scheduled-course:has(.teacher-name.hidden):has(.room-num.hidden):not(
      :has(.class-size-info:not(.hidden))
    )
    .note-indicator {
    left: 0 !important;
    right: auto !important;
  }

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

@layer components {
  #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;
  }

  .btn-primary {
    @apply font-special py-2 px-4 bg-cc-blue-medium transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &: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-1 px-4 bg-cc-blue-medium transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &: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 transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-green-medium shadow-inner ring-2 ring-cc-green-medium scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &: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 transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-text-lighter shadow-inner ring-2 ring-cc-blue-text-lighter scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &: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 transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-gray-200 shadow-inner ring-2 ring-gray-200 scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-gray-200 ring-2 ring-gray-300 outline-none;
    }
  }

  .btn-medium-red {
    @apply font-special py-1 px-2 bg-cc-red-medium-light text-cc-blue-text-lighter transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-red-light shadow-inner ring-2 ring-cc-red-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &: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%
    );
  }

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

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