#backend-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

#sidebar {
  flex: 0 0 var(--sidebar-width);
  background-color: var(--sidebar-background-color);
  box-shadow: inset 0 0px .5em rgba(0, 0, 0, .05);
}

#logotype a {
  display: block;
  padding: 1.25em;
}

#main {
  flex: 1 1 auto;
  background: var(--page-background-color);
}

#sidebar-compressed:checked {
  ~ #sidebar {
    flex-basis: auto;
    .name, .docs {
      display: none;
    }
    #logotype, #search, #platform, #copyright {
      display: none;
    }
    #box-apps-menu > .app:hover {
      &:before {
        position: absolute;
        display: block;
        content: ' ';
        height: 41px;
      }

      a {
        box-shadow: none;
      }
      .docs {
        display: block;
        position: absolute;
        top: 0;
        left: 30px;
        width: ~"calc(var(--sidebar-width) - 64px)";
        padding: .5em;
        background: var(--sidebar-background-color);
        z-index: 999;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        .name {
          display: inline-block;
        }
      }
    }
  }
}

html[dir="rtl"] #sidebar-compressed:checked ~ #sidebar #box-apps-menu > .app:hover .docs {
  left: initial;
  right: 30px;
}

#top-bar {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--top-background-color);
  color: var(--top-text-color);
  //border-bottom: 1px solid var(--default-border-color);
  > li {
    align-self: center;
    flex: 0 0 auto;
    > * {
      padding: ~"calc(var(--gutter-size)/2)";
    }
    > a {
      display: block;
      color: inherit;
      text-decoration: none;
      &:hover {
        background-color: var(--default-background-color-hover);
      }
    }
    .btn-group {
      padding: 6px;
      .btn-sm {
        padding: .15em 1em;
      }
    }
  }

  .nav-toggle {
    padding: 5px 10px;
    background-color: var(--default-background-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    &:hover {
      filter: brightness(.9);
    }
  }
}

#search {
  margin: 0 ~"calc(var(--gutter-size)/2)" var(--gutter-size) ~"calc(var(--gutter-size)/2)";
  .loader-wrapper {
    position: relative;
  }
  .no-results {
    font-size: 2em;
  }
  .results {
    display: none;
    margin-top: 2em;
    .result {
      display: block;
      margin-bottom: 5px;
      &:hover a {
        transform: scale(1.05);
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .id {
        opacity: 0.5;
      }
      .title {
        font-weight: bold;
      }
      .description {
        opacity: 0.75;
      }
    }
  }
}

/* Apps */

#box-apps-menu {
  margin: 0 .5em;
  padding: 0;
  //border-top: 1px var(--sidebar-border-color) solid;
  display: block;

  .app {
    position: relative;
    display: block;
    padding: 0;
    margin: 2px 0;
    border-inline-start: 5px solid transparent;

    a {
      display: block;
      padding: .5em;
      text-decoration: none;
      color: var(--sidebar-text-color);
      border-radius: var(--border-radius);
      &:hover {
        background: rgba(255, 255, 255, .15);
      }
      .fa-stack {
        font-size: 1em;
      }
    }

    .app-icon {
      margin-inline-end: .5em;
    }

    .docs {
      display: none;
    }

    &.active {
      border-color: var(--app-color);
      //background: rgba(255, 255, 255, 0.1);
      .docs {
        display: block;
      }
      > a, .doc.active > a {
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
      }
    }
  }

  .docs {
    margin-top: 2px;
  }

  ul {
    padding-inline-start: 6px;
    margin-inline-start: 15px;
    border: none;
    li {
      border: none;
      margin: 2px 0;
      list-style: none;
      a {
        font-weight: normal;
        padding: 3px 3px;
      }
    }
  }
}

/* Content */

#content {
  flex: 1 1 auto;
  padding: var(--gutter-size);
  > h1 {
    padding: 0 0 ~"calc(var(--gutter-size)/2)" 0;
    margin-top: 0;
    border-bottom: 2px solid transparent;
  }
  .app-icon {
    font-size: 1.25em;
  }
}

.app-icon {
  display: inline-block;
  width: fit-content;
  padding: .33em;
  margin-inline-end: .33em;
  line-height: 100%;
  border-radius: var(--border-radius);
  background: var(--app-color);
  color: var(--whitespace-color);
  text-align: center;
  aspect-ratio: 2.5/1;
  @media print {
    display: none !important;
  }
}

/* Footer */

#footer {
  margin: var(--gutter-size);
  color: #666;
}

#platform {
  font-size: 1.2em;
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
  color: var(--copyright-text-color);
}

#platform a {
  color: inherit;
}

#copyright {
  margin-bottom: var(--gutter-size);
  font-size: 0.9em;
  color: var(--copyright-text-color);
  text-align: center;
}

/* Dark Mode */

html.dark-mode {
  #top-bar > li > a {
    color: inherit;
  }
  #box-apps-menu .app {
   .icon {
      color: #000;
    }
    &.selected > a {
      color: #fff;
    }
  }
  #content {
    background: none;
  }
  .featherlight-content {
    background: #283144;
  }
}
