:root {
  --app-bg: #f5f6f7;
  --app-surface: #ffffff;
  --app-text: #15181d;

  --app-border:
    rgba(
      17,
      24,
      39,
      0.08
    );

  --sidebar-width: 224px;
  --sidebar-collapsed-width: 62px;

  --container-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --app-bg: #0d0e10;
  --app-surface: #111214;
  --app-text: #f4f5f7;

  --app-border:
    rgba(
      255,
      255,
      255,
      0.07
    );
}



html,
body {
  min-height: 100%;
}

body {
  margin: 0;

  background:
    var(--app-bg);

  color:
    var(--app-text);

  transition:
    background-color
      var(--container-transition),
    color
      var(--container-transition);
}



.app-shell {
  position: relative;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: stretch;

  background:
    var(--app-bg);

  transition:
    background-color
      var(--container-transition);
}



.app-shell > .app-sidebar {
  align-self: stretch;

  height: auto;
  min-height: 100vh;
  min-height: 100dvh;

  flex:
    0 0
    var(--sidebar-width);

  transition:
    width
      var(--container-transition),
    min-width
      var(--container-transition),
    flex-basis
      var(--container-transition),
    background-color
      var(--container-transition),
    border-color
      var(--container-transition);
}



.app-shell.sidebar-collapsed
> .app-sidebar {
  width:
    var(--sidebar-collapsed-width);

  min-width:
    var(--sidebar-collapsed-width);

  flex-basis:
    var(--sidebar-collapsed-width);
}



.app-main {
  position: relative;

  width: 100%;
  min-width: 0;

  min-height: 100vh;
  min-height: 100dvh;

  flex: 1 1 auto;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(--app-bg);

  transition:
    background-color
      var(--container-transition);
}



.app-body {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 0;

  flex: 1 1 auto;

  display: flex;
  align-items: stretch;

  overflow: hidden;

  background:
    var(--app-bg);

  transition:
    background-color
      var(--container-transition);
}



.app-content {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 0;

  flex: 1 1 auto;

  padding: 20px;

  overflow-x: hidden;
  overflow-y: auto;

  background:
    var(--app-bg);

  color:
    var(--app-text);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--app-border)
    transparent;

  transition:
    background-color
      var(--container-transition),
    color
      var(--container-transition),
    padding
      var(--container-transition);
}



.app-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.app-content::-webkit-scrollbar-track {
  background:
    transparent;
}

.app-content::-webkit-scrollbar-thumb {
  background:
    var(--app-border);

  border-radius:
    999px;
}



.app-footer {
  width: 100%;

  flex: 0 0 auto;
}



.app-topbar {
  width: 100%;

  flex: 0 0 auto;
}



.app-rightbar,
.rightbar,
.rightbar-panel,
[data-rightbar] {
  display: none !important;
}



.app-container,
.app-layout,
.app-main-layout {
  width: 100%;
  min-width: 0;

  background:
    var(--app-bg);
}



.app-main,
.app-content,
.main-content {
  width: 100%;
  max-width: none;
  min-width: 0;
}



html[data-theme="dark"]
.app-shell,
html[data-theme="dark"]
.app-main,
html[data-theme="dark"]
.app-body,
html[data-theme="dark"]
.app-content {
  background:
    var(--app-bg);
}



html[data-theme="light"]
.app-shell,
html[data-theme="light"]
.app-main,
html[data-theme="light"]
.app-body,
html[data-theme="light"]
.app-content {
  background:
    var(--app-bg);
}



@media (
  max-width: 1100px
) {
  .app-content {
    padding: 18px;
  }
}



@media (
  max-width: 780px
) {
  .app-shell {
    display: block;

    min-height: 100dvh;
  }

  .app-main {
    width: 100%;

    min-height: 100dvh;
  }

  .app-body {
    width: 100%;
  }

  .app-content {
    padding: 14px;
  }

  .app-shell
  > .app-sidebar {
    height: 100dvh;
    min-height: 100dvh;
  }

  .app-shell.sidebar-collapsed
  > .app-sidebar {
    width:
      min(
        224px,
        calc(
          100vw - 46px
        )
      );

    min-width: 0;

    flex-basis: auto;
  }
}



@media (
  max-width: 520px
) {
  .app-content {
    padding: 10px;
  }
}



@media (
  max-width: 380px
) {
  .app-content {
    padding: 8px;
  }
}



@media (
  prefers-reduced-motion:
  reduce
) {
  body,
  .app-shell,
  .app-shell > .app-sidebar,
  .app-main,
  .app-body,
  .app-content {
    transition:
      none !important;
  }
}