/* =========================================================
   BASE
   ========================================================= */

.md-header,
.md-search {
    background-color: #2b3145;
    color: #ffffff;
}

.md-header .md-search__button {
    color: #ffffff !important;
    background-color: #404758 !important;
    --md-default-fg-color: hsla(0, 0%, 100%, 0.87);
    --md-default-bg-color: #1e293b;

    --md-primary-fg-color: #ffffff;
    --md-primary-bg-color: #1e293b;

    color: var(--md-default-fg-color);
}

.md-sidebar,
.md-content,
.md-main {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.md-main {
  border-radius: 6px;
}

.md-content {
  border-radius: 6px;
}

.md-sidebar--primary,
.md-sidebar--secondary {
height: 100vh; 
position: sticky;
top: 0;
}

.md-sidebar--secondary .md-nav__title {
    background-color: transparent;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */
[data-md-color-scheme="default"] {

  .md-main {
    background-color: #f0f0f3;
  }

  .md-content {
    background-color: #f0f0f3;
    color: #111111;
  }

  .md-sidebar--primary {
    border-right: 1px solid #d0d2d6;
    color: #555555;
  }

  .md-sidebar--secondary {
    border-left: 1px solid #d0d2d6;
    color: #555555;
  }

  .md-sidebar__inner {
    background-color: #ebedef;
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    height: auto;
    overflow-y: auto;
  }

  .md-sidebar a {
    color: #444444;
  }
  .md-sidebar a:hover {
    color: #000000;
  }
}

/* =========================================================
   DARK MODE
   ========================================================= */
[data-md-color-scheme="slate"] {

  .md-main {
    background-color: #0f141a;
  }

  .md-content {
    background-color: #0f141a;
    color: #e6e6e6;
  }

  .md-sidebar--primary {
    border-right: 1px solid #2a2f36;
    color: #9aa0a6;
  }

  .md-sidebar--secondary {
    border-left: 1px solid #2a2f36;
    color: #9aa0a6;
  }

  .md-sidebar__inner {
    background-color: #161b22;
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    height: auto;
    overflow-y: auto;
  }

  .md-sidebar a {
    color: #9aa0a6;
  }
  .md-sidebar a:hover {
    color: #ffffff;
  }
}

/* =========================================================
   MIGLIORIE UX
   ========================================================= */

.md-nav__link--active {
  font-weight: 600;
}

.md-nav__item--nested > .md-nav__link {
  opacity: 0.9;
}

.md-typeset {
  line-height: 1.7;
}