/* XCVPN v21 final consistency pass */

/* One button system everywhere: cyan glass like the left rail */
:root{
  --xc-btn-bg-a: rgba(255,255,255,.075);
  --xc-btn-bg-b: rgba(18,24,34,.82);
  --xc-btn-border: rgba(255,255,255,.25);
  --xc-btn-cyan: rgba(37,223,255,.54);
  --xc-btn-text: #f8fbff;
}

button,
.btn,
input[type="submit"],
input[type="button"],
a.btn,
.dataTables_wrapper .paginate_button,
.page-link{
  min-height:34px!important;
  padding:6px 12px!important;
  border-radius:13px!important;
  border:1px solid var(--xc-btn-border)!important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--xc-btn-bg-a), var(--xc-btn-bg-b))!important;
  color:var(--xc-btn-text)!important;
  font-weight:800!important;
  font-size:13px!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 12px rgba(37,223,255,.13)!important;
  cursor:pointer!important;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease!important;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
.dataTables_wrapper .paginate_button:hover,
.page-link:hover{
  transform:translateY(-1px);
  border-color:var(--xc-btn-cyan)!important;
  background:
    linear-gradient(90deg, rgba(37,223,255,.16), rgba(255,255,255,.035)),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(18,24,34,.88))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(37,223,255,.22),
    0 0 18px rgba(37,223,255,.22)!important;
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
a.btn:active{
  transform:translateY(0)!important;
}

/* Keep danger/success meaning but with same shape */
.btn-danger,
.btn-outline-danger{
  border-color:rgba(255,95,115,.45)!important;
}
.btn-danger:hover,
.btn-outline-danger:hover{
  border-color:rgba(255,95,115,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 16px rgba(255,95,115,.20)!important;
}
.btn-success,
.btn-outline-success{
  border-color:rgba(80,230,140,.45)!important;
}
.btn-success:hover,
.btn-outline-success:hover{
  border-color:rgba(80,230,140,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 16px rgba(80,230,140,.20)!important;
}

/* Left rail final order/spacing polish */
.sidebar,
#sidebar,
.left-sidebar,
.nav-sidebar,
.side-menu,
aside{
  width:204px!important;
  max-width:204px!important;
  min-width:204px!important;
  padding-left:7px!important;
  padding-right:11px!important;
}

.list-group-item.nav-glass,
.nav-glass,
.sidebar a.list-group-item,
#sidebar a.list-group-item{
  width:calc(100% - 8px)!important;
  max-width:calc(100% - 8px)!important;
  min-height:35px!important;
  padding:7px 9px!important;
  margin-right:8px!important;
  margin-bottom:7px!important;
  border-radius:13px!important;
  font-size:12.6px!important;
}

/* Login button gets the exact same button system with proper spacing */
.login-card button,
.login-box button,
.auth-card button,
.card-login button,
.login-card input[type="submit"],
.login-box input[type="submit"],
.auth-card input[type="submit"],
.card-login input[type="submit"]{
  width:100%!important;
  min-height:42px!important;
  margin-top:8px!important;
  margin-bottom:18px!important;
  border-radius:14px!important;
}

.login-copyright,
.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:4px!important;
  display:block!important;
}

/* Tables more refined */
.table>:not(caption)>*>*{
  padding:6px 8px!important;
}
.table thead th{
  letter-spacing:.02em;
}

/* Forms and Add/Edit pages: keep all action buttons lined up */
form .btn,
form button{
  margin-right:4px;
}

/* DataTables previous/next should not appear glued together */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a{
  margin-left:4px!important;
  min-width:34px!important;
}

/* Mobile still compact */
@media(max-width:992px){
  .sidebar,
  #sidebar,
  .left-sidebar,
  .nav-sidebar,
  .side-menu,
  aside{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .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;
    padding:8px 5px!important;
    font-size:0!important;
  }
}