/* =========================================================
   SADRI VILLA
   MASTER ADMIN SIDEBAR UI
   File: admin-sidebar-ui.css
   ========================================================= */


/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-sidebar{

  width:60px;

  position:fixed;

  top:0;
  left:0;

  height:100vh;

  background:#020617;

  border-right:
    1px solid
    rgba(255,255,255,.08);

  color:#fff;

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

  overscroll-behavior-y:contain;

  z-index:99999;

  transition:
    width .25s ease,
    transform .25s ease;

  scrollbar-width:thin;

  scrollbar-color:
    rgba(255,255,255,.15)
    transparent;
}


/* =========================================================
   SIDEBAR SCROLLBAR
   ========================================================= */

.admin-sidebar::-webkit-scrollbar{

  width:4px;

}

.admin-sidebar::-webkit-scrollbar-track{

  background:transparent;

}

.admin-sidebar::-webkit-scrollbar-thumb{

  background:
    rgba(255,255,255,.15);

  border-radius:20px;

}

.admin-sidebar::-webkit-scrollbar-thumb:hover{

  background:
    rgba(255,255,255,.25);

}


/* =========================================================
   SIDEBAR RIGHT EDGE
   ========================================================= */

.admin-sidebar::after{

  content:"";

  position:absolute;

  top:0;
  right:0;

  width:1px;
  height:100%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  opacity:.25;

}


/* =========================================================
   SIDEBAR HEADER
   ========================================================= */

.admin-sidebar-header{

  display:none;

  padding:16px;

  border-bottom:
    1px solid
    rgba(255,255,255,.10);

}


.admin-sidebar-header h2{

  margin:0;

  font-family:
    Arial,
    sans-serif;

  font-size:20px;

  line-height:1.2;

  font-weight:800;

  color:#fff;

}


.admin-sidebar-header p{

  margin:3px 0 0;

  font-family:
    Arial,
    sans-serif;

  font-size:14px;

  line-height:1.4;

  color:#94a3b8;

}


/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.admin-sidebar-nav{

  padding:8px 0 50px;

  box-sizing:border-box;

  width:100%;

}

/* =========================================================
   FINAL MOBILE SIDEBAR SCROLL FIX
   ========================================================= */

@media (max-width:1024px){

  .admin-sidebar{
    height:100vh !important;
    max-height:100vh !important;

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

    -webkit-overflow-scrolling:touch;

    box-sizing:border-box;
  }

  .admin-sidebar-nav{
    width:100% !important;
    box-sizing:border-box;

    padding-bottom:60px !important;
  }

  .admin-sidebar-link{
    flex-shrink:0 !important;
  }

  .admin-sidebar-search{
    flex-shrink:0 !important;
  }

}


/* =========================================================
   SIDEBAR LINK
   ========================================================= */

.admin-sidebar-link{

  display:flex;

  align-items:center;

  justify-content:flex-start;

  width:100%;

  min-height:56px;

  box-sizing:border-box;

  padding:14px 16px;

  gap:12px;

  border-radius:12px;

  color:#fff;

  text-decoration:none;

  font-family:
    Arial,
    sans-serif;

  font-size:18px;

  font-weight:500;

  line-height:1.2;

  transition:
    background .25s ease,
    color .25s ease;

  position:relative;

  z-index:1;

  white-space:nowrap;

  overflow:hidden;

}


/* =========================================================
   LINK HOVER
   ========================================================= */

.admin-sidebar-link:hover{

  background:
    rgba(255,255,255,.06);

  color:#fff;

  text-decoration:none;

}


/* =========================================================
   ACTIVE LINK
   ========================================================= */

.admin-sidebar-link.active{

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font-weight:700;

  border-radius:12px;

  text-decoration:none;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.03);

}


/* =========================================================
   SIDEBAR ICON
   ========================================================= */

.admin-sidebar-icon{

  width:24px;

  height:24px;

  flex-shrink:0;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  line-height:1;

}


/* =========================================================
   SIDEBAR LABEL
   ========================================================= */

.admin-sidebar-label{

  opacity:0;

  visibility:hidden;

  white-space:nowrap;

  margin-left:0;

  transition:
    opacity .2s ease,
    visibility .2s ease,
    margin-left .2s ease;

}


/* =========================================================
   DESKTOP SIDEBAR HOVER
   ========================================================= */

@media(min-width:1025px){

  .admin-sidebar:hover{

    width:280px;

  }


  .admin-sidebar:hover
  .admin-sidebar-header{

    display:flex;

    justify-content:flex-start;

  }


  .admin-sidebar:hover
  .admin-sidebar-label{

    opacity:1;

    visibility:visible;

  }

}


/* =========================================================
   MOBILE MENU BUTTON
   IMPORTANT:
   CSS CONTROLS THE HAMBURGER.
   JAVASCRIPT CANNOT CHANGE IT TO X.
   ========================================================= */

.admin-sidebar-mobile-btn{

  display:none;

  position:fixed;

  top:10px;

  left:10px;

  width:40px;

  height:40px;

  padding:0;

  margin:0;

  border:none !important;

-webkit-appearance:none !important;
appearance:none !important;

  outline:none;

  border-radius:10px;

  background:#020617 !important;

  color:#fff !important;

  font-family:Arial,sans-serif;

  font-size:0 !important;

  font-weight:400;

  line-height:0;

  text-align:center;

  cursor:pointer;

  z-index:100001;

  align-items:center;

  justify-content:center;

  box-shadow:
    0 6px 18px
    rgba(0,0,0,.20);

}


/* =========================================================
   FORCE HAMBURGER
   ========================================================= */

.admin-sidebar-mobile-btn::before{

  content:"☰" !important;

  display:block !important;

  width:auto !important;
  height:auto !important;

  color:#fff !important;

  font-family:Arial,sans-serif !important;

  font-size:25px !important;

  font-weight:400 !important;

  line-height:1 !important;

  visibility:visible !important;

  opacity:1 !important;

  transform:none !important;

}


/* =========================================================
   NEVER CREATE SECOND ICON
   ========================================================= */

.admin-sidebar-mobile-btn::after{

  content:none !important;

  display:none !important;

  width:0 !important;

  height:0 !important;

  transform:none !important;

}


/* =========================================================
   MOBILE BUTTON STATES
   ========================================================= */

.admin-sidebar-mobile-btn:hover,
.admin-sidebar-mobile-btn:focus,
.admin-sidebar-mobile-btn:active{

  background:#020617 !important;

  color:#fff !important;

  border:none !important;

  outline:none !important;

  transform:none !important;

}


/* =========================================================
   MOBILE SIDEBAR
   ========================================================= */

@media(max-width:1024px){

  .admin-sidebar{

    width:280px !important;

    height:100vh;

    transform:
      translateX(-100%);

    transition:
      transform .25s ease;

    background:#08111f;

  }


  .admin-sidebar.show{

    transform:
      translateX(0);

  }


  .admin-sidebar-header{

    display:flex;

    align-items:center;

    padding:16px;

  }


  .admin-sidebar-header h2,
  .admin-sidebar-header p{

    display:block;

  }


  .admin-sidebar-link{

    width:100%;

    height:56px;

    padding:0 18px;

    gap:14px;

  }


  .admin-sidebar-label{

    opacity:1 !important;

    visibility:visible !important;

    margin-left:0 !important;

  }


  .admin-sidebar-mobile-btn{

    display:flex;

  }

}


/* =========================================================
   ADMIN PAGE CONTENT
   ========================================================= */

.admin-sidebar-page-content{

  margin-left:60px;

}


/* =========================================================
   MOBILE PAGE CONTENT
   ========================================================= */

@media(max-width:1024px){

  .admin-sidebar-page-content{

    margin-left:0;

  }

}


/* =========================================================
   FINAL HAMBURGER SAFETY OVERRIDE
   ========================================================= */

.admin-sidebar-mobile-btn::before{

  content:"☰" !important;

  display:block !important;

  visibility:visible !important;

  opacity:1 !important;

  color:#fff !important;

}


.admin-sidebar-mobile-btn::after{

  content:none !important;

  display:none !important;

}

/* =========================================================
   SIDEBAR SEARCH
   ========================================================= */

.admin-sidebar-search{

  padding:10px 10px 8px;

  position:sticky;

  top:0;

  background:#020617;

  z-index:10;

}


/* SEARCH INPUT */

.admin-sidebar-search input{

  width:100%;

  box-sizing:border-box;

  padding:10px 12px;

  border:1px solid rgba(255,255,255,.15);

  border-radius:10px;

  background:#111827;

  color:#fff;

  font-family:Arial,sans-serif;

  font-size:14px;

  outline:none;

}


/* SEARCH PLACEHOLDER */

.admin-sidebar-search input::placeholder{

  color:#94a3b8;

}


/* SEARCH FOCUS */

.admin-sidebar-search input:focus{

  border-color:rgba(255,255,255,.35);

  background:#172033;

}





/* =========================================================
   MOBILE SIDEBAR SEARCH - FINAL
   ========================================================= */

@media (max-width:1024px){

  .admin-sidebar-search{

    display:block !important;

    width:100%;

    box-sizing:border-box;

    padding:12px 12px 10px;

    background:#08111f;

    position:sticky;

    top:0;

    z-index:100;

  }

  .admin-sidebar-search input{

    display:block !important;

    width:100% !important;

    height:42px;

    box-sizing:border-box;

    padding:10px 12px;

    border:1px solid rgba(255,255,255,.20);

    border-radius:10px;

    background:#111827;

    color:#fff;

    font-family:Arial,sans-serif;

    font-size:14px;

    outline:none;

  }

  .admin-sidebar-search input::placeholder{

    color:#94a3b8;

  }

  .admin-sidebar-search input:focus{

    border-color:rgba(255,255,255,.45);

    background:#172033;

  }

}

/* =========================================================
   FINAL MOBILE SIDEBAR FIX
   ========================================================= */

@media (max-width:1024px){

  .admin-sidebar-search{
    display:block !important;
    width:100% !important;
    box-sizing:border-box;
    padding:12px !important;
    background:#08111f !important;
    position:sticky;
    top:0;
    z-index:100;
  }

  .admin-sidebar-search input{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:100% !important;
    height:42px !important;
    box-sizing:border-box;

    padding:10px 12px !important;

    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:10px !important;

    background:#111827 !important;
    color:#fff !important;

    font-family:Arial,sans-serif;
    font-size:14px !important;

    outline:none;
  }

  .admin-sidebar-search input::placeholder{
    color:#94a3b8 !important;
    opacity:1 !important;
  }

  .admin-sidebar-search input:focus{
    border-color:rgba(255,255,255,.45) !important;
    background:#172033 !important;
  }

  /* Hamburger is hidden while sidebar is open */
  .admin-sidebar-mobile-btn.hidden{
    display:none !important;
  }

}

@media (max-width:1024px){

  .admin-sidebar{
    box-sizing:border-box;
  }

  .admin-sidebar-search{
    box-sizing:border-box;
  }

  .admin-sidebar-search input{
    max-width:100%;
  }

}