/* Source container for gitcode icon and wide screen toggle */
.source-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0px 0.6rem 0px 0px;
}

.source-container .md-source {
  display: flex;
  align-items: center;
}

/* Container for the selectors in sidebar */
.sidebar-selectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 201, 201, 1);
  z-index: 2;
}

/* Individual custom select wrapper */
.custom-select {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  width: 100%;
  height: 30px;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(201, 201, 201, 1);
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 1);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s;
}

.custom-select:hover {
  border-color: rgba(201, 201, 201, 1);
}

/* Label text ("项目" / "版本") */
.select-label {
  color: rgba(174, 174, 174, 1);
  font-family: "HarmonyOS Sans SC 2025";
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
  white-space: nowrap;
  pointer-events: none;
}

/* The selector content area */
.repo-selector,
.version-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(25, 25, 25, 1);
  position: relative;
  min-width: auto;
  white-space: nowrap;
}

/* Down arrow indicator */
.custom-select::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(153, 153, 153, 1);
  transition: transform 0.2s;
}

.custom-select.active::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Read-only displayed text */
.repo-readOnly,
.version-readOnly {
  color: rgba(25, 25, 25, 1);
  font-family: "HarmonyOS Sans SC 2025", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Dropdown options list */
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 4px 0;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(201, 201, 201, 1);
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  cursor: not-allowed;
}

/* Category title */
.select-options .opTitle {
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(201, 201, 201, 1);
  border-bottom: 1px solid rgba(201, 201, 201, 1);
  pointer-events: none;
}

/* Option items */
.select-options .option {
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--md-default-fg-color, #333);
  transition: background-color 0.15s, color 0.15s;
}

.select-options .option:hover {
  background-color: var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.07));
  color: var(--md-default-fg-color, #333);
}

/* Dark scheme adjustments */
[data-md-color-scheme="slate"] .custom-select {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] .custom-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

[data-md-color-scheme="slate"] .select-options {
  background: var(--md-default-bg-color);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-md-color-scheme="slate"] .select-options .option:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Search form styles */
.md-header__inner .md-search__form {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(201, 201, 201, 1);
  border-radius: 0.375rem;
  height: 36px;
  box-sizing: border-box;
}

.md-header__inner .md-search__form:hover {
  background-color: rgba(255, 255, 255, 1);
}

.md-header__inner .md-search__input {
  background: transparent;
}

.md-search__inner .md-search__input::placeholder {
  color: rgba(153, 153, 153, 1);
}

@media screen and (min-width: 60em) {
  [data-md-color-primary=white] .md-search__input+.md-search__icon {
    color: #0000008a !important;
  }
}

@media screen and (min-width: 76.25em) {
  [data-md-toggle=search]:checked~.md-header .md-search__inner {
    width: 26.4rem;
    max-width: 26.4rem;
  }
}

.md-search__scrollwrap {
  width: 100% !important;
}

.md-search__suggest {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 76px);
}

/* GitCode source icon styles */
.md-header__source .md-source__icon svg {
  width: 20px;
  height: 20px;
}

.md-header__source .md-source__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wide screen toggle button */
.wide-screen-toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.wide-screen-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wide-screen-icon {
  width: 20px;
  height: 20px;
  transition: opacity 0.2s;
}

.wide-screen-open {
  display: block;
}

.wide-screen-close {
  display: none;
}

.wide-screen-toggle.wide-screen-active .wide-screen-open {
  display: none;
}

.wide-screen-toggle.wide-screen-active .wide-screen-close {
  display: block;
}

/* Responsive: mobile layout */
@media screen and (max-width: 76.2344em) {
  .wide-screen-toggle {
    display: flex;
  }

  .md-nav--primary {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .md-nav--primary .md-nav__source {
    flex-shrink: 0;
  }
}

/* Sidebar search button */


.sidebar-search__button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(201, 201, 201, 1);
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 1);
  cursor: pointer;
  font-family: "HarmonyOS Sans SC 2025", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(153, 153, 153, 1);
  transition: border-color 0.2s;
}

.sidebar-search__button:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.sidebar-search__button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(153, 153, 153, 1);
}

.sidebar-search__button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark scheme for sidebar search */
[data-md-color-scheme="slate"] .sidebar-search__button {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: var(--md-default-bg-color);
  color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] .sidebar-search__button:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

[data-md-color-scheme="slate"] .sidebar-search__button svg {
  color: rgba(255, 255, 255, 0.5);
}

.md-nav--primary .sidebar-selectors {
  flex-shrink: 0;
}

.md-nav--primary .md-nav__list[data-md-scrollfix] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.md-nav--primary .md-nav__list[data-md-scrollfix]::-webkit-scrollbar {
  display: none;
}

/* Desktop hide mobile menu button */
@media screen and (min-width: 76.25em) {

  .mobile-drawer-overlay,
  .mobile-drawer {
    display: none !important;
  }

  .md-search__options {
    top: 0.25rem;
  }
}

@media screen and (max-width: 59.9844em) {
  .md-search__options {
    top: 0.25rem;
  }

  .md-nav__source {
    background-color: #fff;
    color: var(--hi-red);
  }
}