/* CommerceGenie Admin Layout — theme variables are in skin.css */

/* Admin container */
.ntelioApp {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.toast-container {
  z-index: 2000;
}

.ntelioApp footer {
  height: 0.7em;
  font-size: 0.7em;
  color: var(--color1);
  background-color: transparent;
}
.ntelioApp footer p {
  position: relative;
  top: 50%;
}
.ntelioApp #main {
  height: 100%;
}
.ntelioApp .content {
  flex: 1;
  overflow: hidden;
}
.ntelioApp .menu-column {
  width: 200px;
  overflow-y: auto;
}
.ntelioApp .main-column {
  flex: 1;
  overflow-y: auto;
}

/* Cards */
.ntelioApp .card {
  border-radius: var(--application-border-radius);
  border: 0px solid white;
  height: 100%;
}
.ntelioApp .card-footer {
  border-radius: 0px 0px 40px var(--application-border-radius);
  background-color: #dadada;
}
.ntelioApp .card-header {
  border-top-left-radius: var(--application-border-radius);
  border-top-right-radius: var(--application-border-radius);
  background-color: var(--color1);
  color: white;
}
.ntelioApp .card-body {
  padding: 8px;
}

/* Buttons */
.ntelioApp .btn-primary {
  background-color: var(--color1);
  color: var(--color0);
}
.ntelioApp .btn-primary:hover {
  background-color: var(--color2);
}
.ntelioApp .btn-primary:active {
  background-color: var(--color3);
}

/* Navbar */
.ntelioApp .vertical-navbar {
  width: 220px;
  height: calc(100vh - 50px);
}
.ntelioApp .vertical-navbar.collapsed {
  width: 60px;
  height: calc(100vh - 50px);
}
.ntelioApp .vertical-navbar.expanded,
.ntelioApp .vertical-navbar:hover {
  width: 210px;
}
.ntelioApp .vertical-navbar .menu-item:hover {
  background-color: var(--color1);
}
.ntelioApp .vertical-navbar .menu-item.active {
  background-color: rgba(13, 202, 240, 0.1);
  border-left: 3px solid var(--color1);
}
.ntelioApp .vertical-navbar-bottom .menu-item:hover {
  background-color: var(--color1);
}

/* Toast */
.ntelioApp .toast {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

/* Files */
.files .trashcan {
  margin-right: 0.5em;
}
.files {
  margin-top: 0em;
}

/* Sign-in form */
.form-signin {
  max-width: 330px;
  padding: 1rem;
}
.form-signin .form-floating:focus-within {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-signin #errorMessage {
  color: red;
  font-size: 0.8em;
  padding: 0.8em;
}

/* Page Layout */
.ntelioApp #content-wrapper {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  margin-left: calc(60px + 5px);
  margin-top: 10px;
}
.ntelioApp #content-wrapper > [widgetid] {
  height: calc(100% - 1.5em);
}

/* Agent Panel */
.ntelioApp .agent {
  height: calc(100% - 1.6em);
  min-height: 0;
  overflow: hidden;
}
.ntelioApp .agent .row {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
.ntelioApp .agent #content {
  overflow-y: auto;
  height: 100%;
}
.ntelioApp .agent #navigation {
  overflow-y: auto;
}
.ntelioApp .agent #content > * {
  height: 100%;
  min-height: 0;
}