:root {
  color: #000;
  --ucl-white: #ffffff;
  --ucl-off-white: #fafafa;
  --ucl-pale-purple: #eedeff;
  --ucl-light-purple: #ddbdff;
  --ucl-bright-purple: #993bff;
  --ucl-mid-purple: #ba82ff;
  --ucl-dark-purple: #361a54;
  --theme-background: var(--ucl-pale-purple);
  --button-active-background: #f5effb;
}

.no-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

strong {
  font-weight: 600;
}

body {
  font-family: "UCL Sans", "Segoe UI", "Roboto", "Arial", sans-serif;
  background: #ffffff;
  margin: 0;
  min-height: 100vh;
  margin-bottom: 20px;
}

a {
  color: var(--ucl-bright-purple);
  text-decoration: underline;
}

.button-row,
#module-search {
  text-align: center;
  margin: 8px 0;
  line-height: 250%;
  color: var(--ucl-dark-purple);
}

#yoe-button-row {
  margin: 0;
}

#section-by-row {
  margin: 0;
}

#theme-button-row {
  background: #ffffff;
  border-bottom: 1px solid var(--ucl-dark-purple);
  padding-bottom: 8px;
}

.module-section {
  display: none;
}

details > summary {
  cursor: pointer;
  text-align: center;
  list-style-type: "▸ ";
}

details[open] {
  border-bottom: 1px solid #ddd;
}

details[open] > summary {
  list-style-type: "▾ ";
}

details h2 {
  text-align: center;
  text-decoration: underline;
  font-size: medium;
}

.module-section:has(.active-theme),
#module-grid.no-theme-active .module-section {
  display: block;
}

.module-section h3 {
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  position: relative;
  margin-top: 2px;
  margin-bottom: 8px;
}

.section-header {
  position: relative;
  font-size: medium;
}

.taken-section-button {
  position: absolute;
  bottom: 50%;
  right: 0;
  transform: translateY(50%);
  visibility: hidden;
  font-size: 15px;
}

#clear-taken-modules-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

@media (hover: hover) {
  .module-section h3:hover .taken-section-button {
    visibility: visible;
  }
}

#module-grid {
  margin-bottom: 50px;
}

.module-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  text-align: center;
  /* -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; */
}

.module {
  border: 1.5px solid #d1d5db;
  padding: 10px 10px;
  margin: 0;
  border-radius: 12px;
  background: var(--ucl-off-white);
  width: 180px;
  box-shadow: 0 2px 12px rgba(60, 80, 120, 0.07);
  transition: box-shadow 0.2s, background-color 0.5s, border-color 0.5s;
  flex-shrink: 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  color: #000;
  position: relative;
}

@media (hover: hover) {
  .module:hover {
    box-shadow: 0 4px 24px rgba(60, 80, 120, 0.35);
    cursor: pointer;
    opacity: 1 !important;
    z-index: 99;
  }
}

.module h4 {
  color: var(--ucl-dark-purple);
  margin: 0;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}

.module .module-code {
  font-weight: 400;
  font-size: 11px;
  color: var(--ucl-dark-purple);
}

.module p {
  color: #000;
  margin: 2px 0 2px 0;
  line-height: 1.4;
}

.themes-list,
#themes-detail-toggle {
  display: none;
}

br.title-break {
  /* display: none; */
}

.module a {
  color: inherit;
  text-align: center;
  font: inherit;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
}

.module .top-container {
  flex-grow: 1;
}

.taken-label {
  margin-bottom: 0px;
  align-self: center;
  cursor: pointer;
  position: absolute;
  bottom: 8px;
  right: 8px;
  visibility: hidden;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: smaller;
  vertical-align: middle;
}

.taken-checkbox {
  vertical-align: middle;
}

.taken-checkbox[data-checked="true"] {
  visibility: visible;
}

/* Always show the button (not the text) if you can't hover */
@media (hover: none) {
  .taken-checkbox {
    visibility: visible;
  }
}

@media (hover: hover) {
  .module:hover .taken-label {
    visibility: visible;
  }
}

.no-details-enabled .top-container {
  align-content: center;
}

.description-low-detail .module .description {
  display: none;
}

.syllabus-low-detail .module .syllabus {
  display: none;
}

.themes-low-detail .module .themes-list {
  display: none;
}

.prereqs-low-detail .module .prereqs-list {
  display: none;
}

.related-low-detail .module .related-list {
  display: none;
}

.reqfors-low-detail .module .reqfors-list {
  display: none;
}

.groups-low-detail .module .groups-list {
  display: none;
}

.module.current-theme-no-prereqs {
  border-color: var(--ucl-dark-purple) !important;
  background-color: var(--theme-background);
  z-index: 1;
}

.module.active-module {
  border-color: var(--ucl-bright-purple) !important;
  z-index: 1;
}

.module.prereq-module {
  border-color: var(--ucl-mid-purple);
  background-color: var(--ucl-mid-purple);
  z-index: 1;
  opacity: 0.95;
}

.module.dependent-module {
  background-color: var(--ucl-pale-purple);
  z-index: 1;
  opacity: 0.95;
}

#module-grid:not(.related-low-detail) .module.related-module {
  border-color: var(--ucl-dark-purple);
  border-style: dashed;
  opacity: 1;
  z-index: 1;
}

button {
  color: var(--ucl-dark-purple);
  font-family: "UCL Sans", "Segoe UI", "Roboto", "Arial", sans-serif;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(60, 80, 120, 0.07);
  transition:
    background 0.2s,
    box-shadow 0.2s;
  border: 2px solid #d1d5db;
  padding: 4px 10px;
  margin: 0 2px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  background: #f7faff;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button.theme-button {
  border: 2px solid #d1d5db;
  padding: 4px 10px;
  margin: 0 2px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  background: #f7faff;
}

button:hover {
  background: var(--button-active-background);
  box-shadow: 0 2px 8px rgba(60, 80, 120, 0.12);
}

.module button.theme-button {
  padding: 2px 6px;
  font-size: 12px;
}

.active-theme {
  /* border-color: var(--ucl-dark-purple); */
}

button.theme-button.active-theme {
  border-color: var(--ucl-dark-purple);
  background-color: var(--theme-background);
}

button[data-state="on"] {
  border-color: var(--ucl-dark-purple);
  background: var(--button-active-background);
}

.inactive-theme,
.inactive-module,
.unmet-prereqs {
  opacity: 0.3;
}

.module.inactive-theme {
  display: none;
}

#svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 100;
  transition: opacity 0.5s;
}

#svg-lines.empty {
  opacity: 0;
}

path {
  stroke-width: 2;
}

header {
  color: var(--ucl-dark-purple);
  background: var(--ucl-off-white);
  padding: 32px 0 24px 0;
  text-align: center;
  border-bottom: 1px solid var(--ucl-dark-purple);
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(60, 80, 120, 0.12);
}

main {
  max-width: max(1100px, 90%);
  margin: 0 auto;
  padding: 8px 16px 0 16px;
}

#intro {
  border-bottom: 1px solid var(--ucl-dark-purple);
  margin-bottom: 8px;
}

#intro p {
  font-size: 1rem;
  margin-bottom: 18px;
  text-align: center;
}

.tooltip {
  position: absolute;
  padding-left: 5px;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  max-width: 200px;
}

input[type="text"] {
  font-family: "UCL Sans", "Segoe UI", "Roboto", "Arial", sans-serif;
  padding: 6px 8px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  width: 200px;
  box-shadow: 0 1px 4px rgba(60, 80, 120, 0.07);
  position: relative;
  top: -2px;
}

@media screen and (min-width: 769px) {
  #theme-button-row {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}

@media screen and (max-width: 768px) {
  br.title-break {
    display: inline;
  }

  .module {
    width: 140px;
  }
  .module h4 {
    font-size: 14px;
  }
  .module p,
  .module a {
    font-size: 12px;
  }
  .module .module-code {
    font-size: 10px;
  }
  button,
  button.theme-button {
    font-size: 12px;
    padding: 4px 4px;
  }
  .button-row,
  #module-search {
    font-size: 12px;
    line-height: 250%;
  }
  .taken-label {
    font-size: xx-small;
  }
}