/* Ajuste final da barra lateral do Egghead.
   Este arquivo fica por ultimo para vencer as camadas antigas do tema. */
:root {
  --egg-sidebar-expanded-w: 294px;
  --egg-sidebar-collapsed-w: 86px;
  --egg-sidebar-gap: 38px;
}

.sidebar {
  width: 294px !important;
  left: 16px !important;
  top: 16px !important;
  bottom: 16px !important;
  overflow: visible !important;
  isolation: isolate !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 34px 48px 42px 30px / 38px 30px 52px 34px !important;
  background:
    radial-gradient(circle at 1px 1px, var(--egg-sidebar-dot, rgba(17, 17, 17, .105)) 1px, transparent 1.55px) 0 0 / 12px 12px,
    linear-gradient(178deg, var(--egg-sidebar-start, #ffdf3c) 0%, var(--egg-sidebar-mid, #ffd31f) 58%, var(--egg-sidebar-end, #ffbf18) 100%) !important;
  box-shadow: 7px 7px 0 var(--egg-line), 0 20px 42px rgba(17, 17, 17, .14) !important;
  transition: width .22s ease, transform .22s ease, box-shadow .18s ease, background .18s ease !important;
}

.sidebar::before,
.sidebar::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.sidebar::before {
  inset: 9px 8px 10px 8px !important;
  border: 2px solid rgba(17, 17, 17, .18) !important;
  border-radius: 28px 40px 35px 24px / 31px 25px 45px 28px !important;
}

.sidebar::after {
  left: 28px !important;
  right: 24px !important;
  top: 104px !important;
  height: 44px !important;
  border-top: 3px solid rgba(255, 255, 255, .55) !important;
  border-radius: 50% 48% 0 0 !important;
  transform: rotate(-3deg) !important;
}

.sidebar .sidebar-brand,
.sidebar .sidebar-nav,
.sidebar .sidebar-footer {
  position: relative !important;
  z-index: 1 !important;
}

.sidebar .sidebar-brand {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100px !important;
  padding: 13px 18px 9px !important;
}

.sidebar .sidebar-brand-banner {
  display: block !important;
  width: min(100%, 204px) !important;
  max-width: 204px !important;
  max-height: 78px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.sidebar .sidebar-brand-mark {
  display: none !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(2px 3px 0 rgba(17, 17, 17, .25));
}

.sidebar-desktop-toggle {
  position: absolute !important;
  right: -29px !important;
  top: 356px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 29px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 3px solid var(--egg-line) !important;
  border-left-width: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .42), transparent 44%),
    var(--egg-sidebar-mid, var(--egg-yellow)) !important;
  color: #111111 !important;
  box-shadow: 3px 3px 0 var(--egg-line) !important;
  transform: none !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.sidebar-desktop-toggle:hover,
.sidebar-desktop-toggle:focus-visible {
  background: var(--egg-sidebar-start, #ffe766) !important;
  box-shadow: 4px 4px 0 var(--egg-line) !important;
  transform: translateX(2px) !important;
  outline: none !important;
}

.sidebar-desktop-toggle span::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-left: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
  transform-origin: center;
}

.sidebar-desktop-toggle span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 1 !important;
}

.sidebar-nav {
  gap: 8px !important;
  padding: 6px 18px 16px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, .45) transparent;
}

.nav-group {
  --nav-group-accent: var(--egg-blue);
  --nav-group-tint: color-mix(in srgb, var(--egg-blue) 22%, var(--egg-paper));
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.nav-group[data-sidebar-group="questoes"] {
  --nav-group-accent: var(--egg-yellow-2, #ff9f1c);
  --nav-group-tint: color-mix(in srgb, var(--egg-yellow) 32%, var(--egg-paper));
}

.nav-group[data-sidebar-group="organizacao"] {
  --nav-group-accent: var(--egg-green);
  --nav-group-tint: color-mix(in srgb, var(--egg-green) 24%, var(--egg-paper));
}

.nav-group[data-sidebar-group="sistema"] {
  --nav-group-accent: var(--egg-purple);
  --nav-group-tint: color-mix(in srgb, var(--egg-purple) 22%, var(--egg-paper));
}

.sidebar .nav-group-toggle {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 8px 9px 11px !important;
  overflow: hidden !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 2px 2px, rgba(17, 17, 17, .08) 1px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(135deg, var(--nav-group-tint) 0%, var(--egg-paper) 74%) !important;
  color: var(--egg-ink) !important;
  box-shadow: 4px 4px 0 var(--egg-line) !important;
  cursor: pointer !important;
  font-family: var(--font-question, var(--font-body)) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: none !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.sidebar .nav-group-toggle:hover,
.sidebar .nav-group-toggle:focus-visible,
.nav-group.has-active .nav-group-toggle,
.nav-group.is-open .nav-group-toggle {
  background:
    radial-gradient(circle at 2px 2px, rgba(17, 17, 17, .09) 1px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(135deg, var(--egg-paper) 0%, var(--nav-group-tint) 100%) !important;
  box-shadow: 5px 5px 0 var(--egg-line) !important;
  transform: translate(-1px, -1px) !important;
  outline: none !important;
}

.nav-group-icon,
.nav-group-text,
.nav-group-caret {
  position: relative !important;
  z-index: 1 !important;
}

.nav-group-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--egg-line) !important;
  border-radius: 11px !important;
  background: var(--nav-group-accent) !important;
  box-shadow: 2px 2px 0 var(--egg-line) !important;
}

.nav-group-icon::before {
  content: "" !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  background: center / contain no-repeat url("assets/sidebar-icons/simulados.svg") !important;
}

.nav-group[data-sidebar-group="questoes"] .nav-group-icon::before {
  background-image: url("assets/sidebar-icons/banco.svg") !important;
}

.nav-group[data-sidebar-group="organizacao"] .nav-group-icon::before {
  background-image: url("assets/sidebar-icons/cronograma.svg") !important;
}

.nav-group[data-sidebar-group="sistema"] .nav-group-icon::before {
  background-image: url("assets/sidebar-icons/config.svg") !important;
}

.nav-group-text {
  display: grid !important;
  min-width: 0 !important;
  gap: 0 !important;
}

.nav-group-label {
  display: block !important;
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-group-hint {
  display: none !important;
  overflow: hidden !important;
  color: var(--egg-muted) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-group-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: 0 !important;
  border: 2px solid var(--egg-line) !important;
  border-radius: 9px !important;
  background: var(--egg-bg-2, #ffffff) !important;
  box-shadow: 2px 2px 0 var(--egg-line) !important;
  color: var(--egg-ink) !important;
  font-family: Arial, sans-serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: rotate(0deg) !important;
  transition: transform .16s ease, background .16s ease !important;
}

.nav-group.is-open .nav-group-caret {
  background: var(--nav-group-accent) !important;
  color: #111111 !important;
  transform: rotate(90deg) !important;
}

.nav-group-links {
  position: relative !important;
  display: grid !important;
  gap: 7px !important;
  padding: 3px 0 0 18px !important;
}

.nav-group-links::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 9px !important;
  bottom: 7px !important;
  width: 4px !important;
  border: 1px solid var(--egg-line) !important;
  border-radius: 999px !important;
  background: var(--nav-group-accent) !important;
}

.nav-group-links[hidden] {
  display: none !important;
}

.nav-group-links .nav-item {
  min-height: 46px !important;
  padding-left: 12px !important;
  background: var(--egg-bg-2, #fffef7) !important;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, .35);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.sidebar .nav-item {
  position: relative !important;
  min-height: 52px !important;
  gap: 12px !important;
  padding: 11px 15px !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 16px !important;
  background: var(--egg-paper, #fffdf4) !important;
  color: var(--egg-ink) !important;
  box-shadow: 3px 3px 0 var(--egg-line) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.sidebar .nav-item:hover {
  background: var(--egg-paper-2, #fff6cb) !important;
  box-shadow: 4px 4px 0 var(--egg-line) !important;
  color: var(--egg-ink) !important;
  transform: translate(-1px, -1px) !important;
}

.sidebar .nav-item.active {
  background: var(--egg-sidebar-start, var(--egg-yellow)) !important;
  color: #111111 !important;
  box-shadow: 2px 2px 0 var(--egg-line) !important;
  transform: translate(1px, 1px) !important;
}

.sidebar .nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 8px !important;
  border: 2px solid var(--egg-line) !important;
  border-left: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--egg-blue) !important;
}

.sidebar .nav-icon {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid rgba(17, 17, 17, .9) !important;
  border-radius: 10px !important;
  background: var(--egg-bg-2, #ffffff) !important;
  box-shadow: 1px 1px 0 var(--egg-line) !important;
}

.sidebar .nav-icon img {
  width: 18px !important;
  height: 18px !important;
}

.sidebar .nav-item.active .nav-icon {
  background: var(--egg-paper-2, #fff7bf) !important;
}

.main-content {
  margin-left: calc(var(--egg-sidebar-expanded-w) + var(--egg-sidebar-gap)) !important;
  width: calc(100vw - var(--egg-sidebar-expanded-w) - var(--egg-sidebar-gap)) !important;
  max-width: calc(100vw - var(--egg-sidebar-expanded-w) - var(--egg-sidebar-gap)) !important;
  box-sizing: border-box !important;
  transition: margin-left .22s ease, width .22s ease, max-width .22s ease !important;
}

.main-content > .page {
  width: 100% !important;
}

body.sidebar-collapsed .sidebar {
  width: var(--egg-sidebar-collapsed-w) !important;
  border-radius: 30px 38px 34px 26px / 34px 28px 42px 30px !important;
}

body.sidebar-collapsed .main-content {
  margin-left: calc(var(--egg-sidebar-collapsed-w) + var(--egg-sidebar-gap)) !important;
  width: calc(100vw - var(--egg-sidebar-collapsed-w) - var(--egg-sidebar-gap)) !important;
  max-width: calc(100vw - var(--egg-sidebar-collapsed-w) - var(--egg-sidebar-gap)) !important;
}

body.sidebar-collapsed .main-content > .page {
  max-width: none !important;
}

body.sidebar-collapsed .sidebar .sidebar-brand {
  min-height: 84px !important;
  padding: 15px 10px 7px !important;
}

body.sidebar-collapsed .sidebar::after {
  left: 18px !important;
  right: 16px !important;
  top: 82px !important;
}

body.sidebar-collapsed .sidebar .sidebar-brand-banner {
  display: none !important;
}

body.sidebar-collapsed .sidebar .sidebar-brand-mark {
  display: block !important;
}

body.sidebar-collapsed .sidebar .sidebar-desktop-toggle {
  right: -28px !important;
  top: 354px !important;
  width: 28px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-left-width: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  transform: none !important;
}

body.sidebar-collapsed .sidebar .sidebar-desktop-toggle:hover,
body.sidebar-collapsed .sidebar .sidebar-desktop-toggle:focus-visible {
  transform: translateX(2px) !important;
}

body.sidebar-collapsed .sidebar-desktop-toggle span::before {
  content: "";
  transform: rotate(225deg);
}

body.sidebar-collapsed .sidebar-nav {
  padding: 8px 12px 12px !important;
  align-items: center !important;
}

body.sidebar-collapsed .nav-item {
  width: 52px !important;
  min-height: 52px !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 8px !important;
  font-size: 0 !important;
}

body.sidebar-collapsed .nav-item.active::before {
  left: -4px !important;
  top: 10px !important;
  bottom: 10px !important;
}

body.sidebar-collapsed .nav-icon {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
}

body.sidebar-collapsed .nav-icon img {
  width: 18px !important;
  height: 18px !important;
}

body.sidebar-collapsed .feedback-nav-badge,
body.sidebar-collapsed .notice-nav-badge {
  position: absolute !important;
  right: -6px !important;
  top: -7px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  line-height: 18px !important;
}

body.sidebar-collapsed .nav-group {
  width: 52px !important;
  margin-top: 8px !important;
}

body.sidebar-collapsed .sidebar .nav-group-toggle {
  grid-template-columns: 1fr !important;
  width: 52px !important;
  min-height: 52px !important;
  padding: 8px !important;
  font-size: 0 !important;
}

body.sidebar-collapsed .nav-group-text,
body.sidebar-collapsed .nav-group-caret {
  display: none !important;
}

body.sidebar-collapsed .nav-group-icon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

body.sidebar-collapsed .nav-group-icon::before {
  width: 18px !important;
  height: 18px !important;
}

body.sidebar-collapsed .nav-group-links {
  width: 52px !important;
  padding-left: 0 !important;
}

body.sidebar-collapsed .nav-group-links::before {
  display: none !important;
}

body.sidebar-collapsed .sidebar-footer {
  margin: 0 12px 12px !important;
  padding-top: 10px !important;
}

body.sidebar-collapsed .sidebar-date,
body.sidebar-collapsed .sidebar-user .user-email {
  display: none !important;
}

body.sidebar-collapsed .sidebar-user {
  justify-content: center !important;
}

body.sidebar-collapsed .logout-btn-top {
  width: 44px !important;
  min-width: 44px !important;
  height: 38px !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

body.sidebar-collapsed .logout-btn-top::after {
  content: "\23FB";
  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
}

html[data-theme="dark"] .sidebar-desktop-toggle,
html[data-palette="noite"] .sidebar-desktop-toggle {
  background: var(--egg-sidebar-mid, var(--egg-yellow)) !important;
  color: #111 !important;
}

@media (max-width: 900px) {
  .sidebar {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 268px !important;
    border-left: 0 !important;
    border-radius: 0 38px 34px 0 / 0 32px 44px 0 !important;
  }

  .sidebar-desktop-toggle {
    display: none !important;
  }

  .sidebar .sidebar-brand {
    min-height: 94px !important;
    padding: 13px 18px 9px !important;
  }

  .sidebar .sidebar-brand-banner {
    display: block !important;
    width: min(100%, 194px) !important;
    max-width: 194px !important;
    max-height: 74px !important;
    margin: 0 auto !important;
  }

  .sidebar .sidebar-brand-mark {
    display: none !important;
  }

  .main-content,
  body.sidebar-collapsed .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .main-content > .page,
  body.sidebar-collapsed .main-content > .page {
    max-width: 100% !important;
  }

  body.sidebar-collapsed .sidebar {
    width: 268px !important;
    border-radius: 0 38px 34px 0 / 0 32px 44px 0 !important;
  }

  body.sidebar-collapsed .sidebar-nav {
    align-items: stretch !important;
    padding: 10px 16px 18px !important;
  }

  body.sidebar-collapsed .nav-item {
    width: auto !important;
    min-height: 50px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    font-size: inherit !important;
  }

  body.sidebar-collapsed .nav-group {
    width: auto !important;
  }

  body.sidebar-collapsed .sidebar .nav-group-toggle {
    grid-template-columns: 32px minmax(0, 1fr) 28px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 9px 8px 9px 11px !important;
    font-size: inherit !important;
  }

  body.sidebar-collapsed .nav-group-text {
    display: grid !important;
  }

  body.sidebar-collapsed .nav-group-caret {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 23px !important;
  }

  body.sidebar-collapsed .nav-group-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  body.sidebar-collapsed .nav-group-icon::before {
    width: 17px !important;
    height: 17px !important;
  }

  body.sidebar-collapsed .nav-group-links {
    width: auto !important;
    padding-left: 18px !important;
  }

  body.sidebar-collapsed .nav-group-links::before {
    display: block !important;
  }

  body.sidebar-collapsed .sidebar-date,
  body.sidebar-collapsed .sidebar-user .user-email {
    display: block !important;
  }

  body.sidebar-collapsed .logout-btn-top {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 7px 12px !important;
    font-size: inherit !important;
  }

  body.sidebar-collapsed .logout-btn-top::after {
    content: none !important;
  }
}
