/* XCVPN final visual refinement v19 */

/* Sidebar: keep every button fully inside the left rail */
:root{
  --xc-sidebar-w-final: 206px;
  --xc-sidebar-mobile-final: 56px;
  --xc-cyan-final:#25dfff;
}

.sidebar,
#sidebar,
.left-sidebar,
.nav-sidebar,
.side-menu,
aside{
  width:var(--xc-sidebar-w-final)!important;
  max-width:var(--xc-sidebar-w-final)!important;
  min-width:var(--xc-sidebar-w-final)!important;
  padding-left:7px!important;
  padding-right:10px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

.sidebar .list-group,
#sidebar .list-group,
.left-sidebar .list-group,
.nav-sidebar .list-group{
  width:100%!important;
  max-width:100%!important;
  padding-right:6px!important;
  box-sizing:border-box!important;
}

.xc-brand-block{
  width:calc(100% - 8px)!important;
  margin-left:0!important;
  margin-right:8px!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border-radius:14px!important;
}

.list-group-item.nav-glass,
.nav-glass,
.sidebar a.list-group-item,
#sidebar a.list-group-item{
  width:calc(100% - 10px)!important;
  max-width:calc(100% - 10px)!important;
  min-height:36px!important;
  padding:7px 9px!important;
  margin-left:0!important;
  margin-right:10px!important;
  margin-bottom:7px!important;
  border-radius:13px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  font-size:12.7px!important;
  letter-spacing:.01em!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 10px rgba(37,223,255,.12)!important;
}

.list-group-item.nav-glass:hover,
.nav-glass:hover,
.sidebar a.list-group-item:hover,
#sidebar a.list-group-item:hover,
.list-group-item.nav-glass.active,
.nav-glass.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(37,223,255,.34),
    0 0 12px rgba(37,223,255,.20)!important;
}

.list-group-item.nav-glass i,
.nav-glass i,
.sidebar a.list-group-item i,
#sidebar a.list-group-item i{
  width:17px!important;
  min-width:17px!important;
  font-size:12.5px!important;
}

/* Make content start a touch further right so the sidebar glow never gets clipped */
.main-content,
.content-wrapper,
.page-content,
.container-main,
.content,
main{
  padding-left:10px!important;
}

/* Login: match panel buttons and add breathing room above copyright */
.login-card button[type="submit"],
.login-box button[type="submit"],
.auth-card button[type="submit"],
.card-login button[type="submit"],
form button[type="submit"],
input[type="submit"]{
  min-height:42px!important;
  border-radius:15px!important;
  border:1px solid rgba(37,223,255,.42)!important;
  background:linear-gradient(180deg,rgba(37,223,255,.22),rgba(255,255,255,.045))!important;
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 18px rgba(37,223,255,.16)!important;
}

.login-card button[type="submit"]:hover,
.login-box button[type="submit"]:hover,
.auth-card button[type="submit"]:hover,
.card-login button[type="submit"]:hover,
form button[type="submit"]:hover,
input[type="submit"]:hover{
  background:linear-gradient(180deg,rgba(37,223,255,.32),rgba(255,255,255,.065))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(37,223,255,.46),
    0 0 22px rgba(37,223,255,.23)!important;
}

.login-card .copyright,
.login-box .copyright,
.auth-card .copyright,
.card-login .copyright,
.login-card [class*="copyright"],
.login-box [class*="copyright"],
.auth-card [class*="copyright"],
.card-login [class*="copyright"]{
  margin-top:18px!important;
  padding-top:6px!important;
  display:block!important;
}

.login-card form,
.login-box form,
.auth-card form,
.card-login form{
  margin-bottom:14px!important;
}

.login-card input,
.login-box input,
.auth-card input,
.card-login input{
  min-height:44px!important;
  border-radius:14px!important;
}

/* Page cards and forms, keep compact but not cramped */
.card{
  overflow:hidden!important;
}

.card-body{
  overflow:visible!important;
}

/* DNS form: less huge, more polished */
input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.54)!important;
}

/* Date picker expiry up to 2099 remains neat */
input[type="date"]{
  color-scheme:dark;
}

/* Mobile rail */
@media(max-width:992px){
  .sidebar,
  #sidebar,
  .left-sidebar,
  .nav-sidebar,
  .side-menu,
  aside{
    width:var(--xc-sidebar-mobile-final)!important;
    max-width:var(--xc-sidebar-mobile-final)!important;
    min-width:var(--xc-sidebar-mobile-final)!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  .sidebar .list-group,
  #sidebar .list-group,
  .left-sidebar .list-group,
  .nav-sidebar .list-group{
    padding-right:0!important;
  }

  .xc-brand-block,
  .list-group-item.nav-glass,
  .nav-glass,
  .sidebar a.list-group-item,
  #sidebar a.list-group-item{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
  }

  .main-content,
  .content-wrapper,
  .page-content,
  .container-main,
  .content,
  main{
    padding-left:6px!important;
  }
}