/*
* sidebar.css
* The vertical menu: section headers, the current row, the rhythm.
* Colors come from the --sb-* variables; vertical_menu.html sets them from
* Appearance and puts the layout choices on the <aside> as data-sb-*
* attributes. The #layout-menu id keeps these rules ahead of the theme's,
* whatever order the stylesheets end up in.
******************************************************************************/

:root {
  --sb-bg: #ffffff;
  --sb-text: #6f6b7d;
  --sb-text-strong: #5d596c;
  --sb-header: #a5a3ae;
  --sb-accent: var(--bs-primary);
  --sb-line: rgba(75, 70, 92, 0.1);
  --sb-hover: rgba(75, 70, 92, 0.06);
}

html.dark-style {
  --sb-bg: #2f3349;
  --sb-text: #b6bee3;
  --sb-text-strong: #cfd3ec;
  --sb-header: #7983bb;
  --sb-accent: color-mix(in srgb, var(--bs-primary) 62%, #fff);
  --sb-line: rgba(134, 146, 208, 0.16);
  --sb-hover: rgba(134, 146, 208, 0.08);
}

#layout-menu.menu-vertical {
  background-color: var(--sb-bg) !important;
  color: var(--sb-text);
}
#layout-menu.menu-vertical .menu-inner-shadow {
  background: linear-gradient(var(--sb-bg) 41%, transparent);
}

/* Brand */
#layout-menu.menu-vertical .app-brand.demo {
  border-bottom: 1px solid var(--sb-line);
}
#layout-menu[data-sb-divider="0"] .app-brand.demo {
  border-bottom: 0;
}
#layout-menu.menu-vertical .app-brand-text.demo {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--sb-text-strong);
}

/* Section headers */
#layout-menu.menu-vertical .menu-inner > .menu-header {
  padding: 1.125rem 1.75rem 0.375rem;
}
#layout-menu.menu-vertical .menu-inner > .menu-header:first-child {
  padding-top: 0.625rem;
}
#layout-menu.menu-vertical .menu-inner > .menu-header .menu-header-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sb-header);
}
#layout-menu[data-sb-headers="plain"] .menu-inner > .menu-header {
  text-transform: none !important;
}
#layout-menu[data-sb-headers="plain"] .menu-inner > .menu-header .menu-header-text {
  font-size: 0.75rem;
  letter-spacing: 0;
}
/* Settings sits at the foot when the menu is shorter than the screen */
#layout-menu.menu-vertical .menu-inner > .menu-header.menu-header-settings {
  margin-top: auto;
}
#layout-menu[data-sb-settings-bottom="0"] .menu-inner > .menu-header.menu-header-settings {
  margin-top: 0;
}

/* Rows */
#layout-menu.menu-vertical .menu-inner > .menu-item {
  margin: 1px 0;
}
#layout-menu.menu-vertical .menu-link {
  font-size: 0.875rem;
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  color: var(--sb-text);
}
#layout-menu.menu-vertical .menu-link .menu-icon {
  font-size: 1.125rem;
}
#layout-menu[data-sb-density="compact"] .menu-link {
  font-size: 0.8125rem;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}
#layout-menu[data-sb-density="compact"] .menu-inner > .menu-header {
  padding-top: 0.875rem;
}
#layout-menu[data-sb-density="comfortable"] .menu-link {
  font-size: 0.9375rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}
#layout-menu[data-sb-density="comfortable"] .menu-inner > .menu-item {
  margin: 0.125rem 0;
}
#layout-menu.menu-vertical .menu-link:hover,
#layout-menu.menu-vertical .menu-link:focus {
  background: var(--sb-hover);
  color: var(--sb-text-strong);
}
#layout-menu.menu-vertical .menu-item.open > .menu-toggle {
  color: var(--sb-text-strong);
}
#layout-menu.menu-vertical .menu-inner .menu-item.active > .menu-link.menu-toggle {
  background: transparent;
  color: var(--sb-text-strong);
}

/* The current page: a tint with a rail on the left, or the theme's pill */
#layout-menu.menu-vertical .menu-inner > .menu-item.active:before {
  display: none;
}
#layout-menu.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: color-mix(in srgb, var(--sb-accent) 14%, transparent) !important;
  box-shadow: none !important;
  color: var(--sb-accent) !important;
  font-weight: 600;
}
#layout-menu.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 3px;
  border-radius: 3px;
  background: var(--sb-accent);
}
#layout-menu.menu-vertical .menu-sub .menu-item.active > .menu-link:not(.menu-toggle)::after {
  left: 0.75rem;
}
#layout-menu[data-sb-rail="0"] .menu-item.active > .menu-link:not(.menu-toggle)::after {
  display: none;
}
#layout-menu[data-sb-active="pill"] .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(72.47deg, var(--sb-accent) 22.16%, color-mix(in srgb, var(--sb-accent) 70%, transparent) 76.47%) !important;
  box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--sb-accent) 48%, transparent) !important;
  color: #fff !important;
}
#layout-menu[data-sb-active="pill"] .menu-item.active > .menu-link:not(.menu-toggle)::after {
  display: none;
}

/* Sub rows: a dot, a ring, or nothing */
#layout-menu.menu-vertical .menu-sub .menu-link {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
#layout-menu.menu-vertical .menu-sub > .menu-item > .menu-link:before {
  content: "";
  width: 5px;
  height: 5px;
  left: 1.5rem;
  top: 50%;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
#layout-menu.menu-vertical .menu-sub > .menu-item.active > .menu-link:before {
  opacity: 1;
}
#layout-menu[data-sb-marker="ring"] .menu-sub > .menu-item > .menu-link:before {
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: transparent;
  border: 1.5px solid currentColor;
}
#layout-menu[data-sb-marker="none"] .menu-sub > .menu-item > .menu-link:before {
  display: none;
}

/* -- Plain <select> lists drawn by the page, not the OS --------------------
   A native select hands its open list to the operating system, so it never
   matched the theme. Chromium's customizable select draws the list in the
   page where this CSS applies; browsers without it keep the native list.
   Select2 widgets hide their native select, so they are unaffected. */
@supports (appearance: base-select) {
  select.form-select:not([multiple]):not([size]) { appearance: base-select; }
  select.form-select::picker-icon { display: none; }
  select.form-select::picker(select) {
    appearance: base-select;
    margin-top: .25rem;
    padding: .375rem;
    max-height: 18rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, .375rem);
    background: #fff;
    color: var(--bs-body-color);
    box-shadow: 0 .25rem 1rem rgba(var(--bs-black-rgb), .16);
  }
  .dark-style select.form-select::picker(select) { background: #2f3349; }
  select.form-select option {
    padding: .4rem .75rem;
    border-radius: calc(var(--bs-border-radius, .375rem) - .125rem);
    cursor: pointer;
  }
  select.form-select option::checkmark { display: none; }
  select.form-select option:hover,
  select.form-select option:focus-visible { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
  select.form-select option:checked { background: var(--bs-primary); color: #fff; }
}