/* ======= GLOBAL ======= */
body, .app-sidebar, .app-content, .app-menu__item, .treeview-menu li {
  font-family: 'Inter','Segoe UI',sans-serif;
  letter-spacing: 0.2px;
}

body.app {
  background-color: #ecf0f5;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ======= SIDEBAR ======= */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 230px;
  background-color: #222d32;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1040;
  scrollbar-width: thin;
  scrollbar-color: #888 #222;
  transition: left .25s ease-in-out, width .25s ease-in-out;
  will-change: left, width;
}

.app-sidebar::-webkit-scrollbar{width:6px}
.app-sidebar::-webkit-scrollbar-thumb{background-color:rgba(136,136,136,.5);border-radius:3px}
.app-sidebar::-webkit-scrollbar-thumb:hover{background-color:rgba(136,136,136,.8)}
.app-sidebar::-webkit-scrollbar-track{background:rgba(30,30,30,.2)}

/* ======= HEADER ======= */
.app-header {
  position:fixed;top:0;left:0;right:0;height:50px;
  z-index:1050;background-color:#1a2226;color:#fff;
  font-weight:500;display:flex;align-items:center;
  padding:0 15px;box-shadow:0 2px 4px rgba(0,0,0,.15)
}

/* ======= CONTENT ======= */
.app-content {
  margin-left:230px!important;
  padding:20px;
  padding-top:70px;
  min-height:100vh;
  background-color:#f4f6f9;
  color:#333;
  transition:margin-left .25s ease-in-out;
  will-change:margin-left;
}

/* ======= TREEVIEW MENU ======= */
.treeview-menu {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .3s ease,opacity .3s ease;
  padding-left:18px;
}
.treeview.is-expanded>.treeview-menu {
  max-height:1000px;
  opacity:1;
}

.treeview-menu li {
  padding:6px 0 6px 8px;
  font-size:13.5px;
}

/* ======= ITEM & ICON ======= */
.app-menu__item {
  color:#b8c7ce;
  font-size:15px;
  display:flex;
  align-items:center;
  padding:11px 16px;
  border-radius:3px;
  letter-spacing:.3px;
  transition:background .25s ease,color .25s ease;
}
.app-menu__item:hover{background:#1e282c;color:#fff}
.app-menu__item i{font-size:15px}

/* ======= ACTIVE ======= */
.app-menu__item.active,.treeview.is-expanded>a {
  background-color:#1e282c;
  color:#fff;
  font-weight:500;
}

/* ======= INDICATOR ======= */
.treeview-indicator {
  margin-left:auto;
  transition:transform .25s ease;
}
.treeview.is-expanded>a .treeview-indicator {
  transform:rotate(90deg);
}

/* ===== CUSTOM CAMBRIA FONT ===== */
.app-menu__item,.treeview>a,.treeview-menu li a {
  font-family:'Cambria',serif!important;
  font-weight:normal;
}

/* ===== SUBMENU ===== */
.treeview-menu li a.treeview-item {
  font-size:13.2px;
  padding:6px 12px 6px 25px;
  color:#c8d1d5;
  display:block;
  border-left:2px solid transparent;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.treeview-menu li a.treeview-item:hover {
  color:#fff;
  background-color:#1b2429;
  border-left:2px solid #00c0ef;
}
.treeview-menu li{margin-bottom:2px}
.treeview-menu{margin-top:4px;margin-bottom:4px}

/* ===== FOOTER ===== */
.app-sidebar footer {
  position:relative;
  bottom:0;
  width:100%;
  padding:12px 10px;
  background:linear-gradient(180deg,#1e282c 0%,#151b1f 100%);
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:#b8c7ce;
  font-size:12.8px;
  font-family:'Cambria',serif;
  letter-spacing:.4px;
  box-shadow:0 -2px 5px rgba(0,0,0,.25);
}
.app-sidebar footer .credit {
  opacity:.85;
  transition:opacity .25s ease;
}
.app-sidebar footer .credit:hover {
  color:#fff;
  opacity:1;
  text-shadow:0 0 6px rgba(0,192,255,.6);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .app-sidebar{
    left:-230px;
    width:230px;
    box-shadow:2px 0 8px rgba(0,0,0,.3);
  }
  body.sidebar-mini .app-sidebar{left:0}
  body.sidebar-mini::after{
    content:"";
    position:fixed;
    top:0;
    left:230px;
    width:calc(100% - 230px);
    height:100%;
    background:rgba(0,0,0,.4);
    z-index:1039;
    transition:opacity .3s ease;
  }
  .app-content{
    margin-left:0!important;
    padding-top:60px;
  }
  .treeview-menu{
    position:relative;
    background:#2c3b41;
    padding-left:10px;
    border-left:2px solid #00c0ef;
  }
  .app-menu__item span,
  .treeview-menu li a.treeview-item{
    display:inline-block!important;
  }
  .app-menu__item{
    font-size:14px;
    padding:10px 14px;
  }
  .app-header{
    position:fixed;
    top:0;left:0;right:0;
    height:50px;
    z-index:1060;
  }
  .app-sidebar{z-index:1050;padding-top:50px}
}

/* ===== DESKTOP MINI MODE ===== */
@media(min-width:769px){
  body.sidebar-mini .app-sidebar{
    width:60px!important;
    transition:width .25s ease-in-out;
  }
  body.sidebar-mini .app-menu__item span{display:none!important}
  body.sidebar-mini .app-menu__item{justify-content:center}
  body.sidebar-mini .app-content{
    margin-left:60px!important;
    transition:margin-left .25s ease-in-out;
  }
  body.sidebar-mini .treeview.is-expanded>.treeview-menu{
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:5px;
  }
  body.sidebar-mini .treeview.is-expanded>.treeview-menu::-webkit-scrollbar{width:6px}
  body.sidebar-mini .treeview.is-expanded>.treeview-menu::-webkit-scrollbar-thumb{
    background-color:rgba(136,136,136,.4);
    border-radius:3px;
  }
  body.sidebar-mini .treeview.is-expanded>.treeview-menu::-webkit-scrollbar-thumb:hover{
    background-color:rgba(136,136,136,.8);
  }
}

/* ===== PRINT ===== */
@media print{
  .app-header,.app-sidebar,.app-sidebar footer,.footer-divider,[data-toggle="sidebar"],.no-print{
    display:none!important;
    visibility:hidden!important;
  }
  .app-content{
    margin:0!important;
    padding:10mm!important;
    width:auto!important;
    min-width:100%!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body{
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    overflow:visible!important;
  }
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  @supports(-moz-appearance:none){
    .app-content{
      margin-left:0!important;
      transform:none!important;
      width:100%!important;
    }
  }
}

input.text-uppercase,
textarea.text-uppercase {
    text-transform: uppercase;
}