
/* XCVPN Layout Repair v17
   Purpose: stop sidebar/content overlap, make lists/forms compact, keep mobile usable.
*/
:root{
  --xc-sidebar:188px;
  --xc-sidebar-mobile:58px;
  --xc-gap:12px;
  --xc-border:rgba(255,255,255,.14);
  --xc-accent:#27d8ff;
  --xc-card:rgba(9,13,21,.74);
  --xc-card2:rgba(18,24,35,.78);
  --xc-muted:rgba(238,245,255,.62);
}

/* Base */
html,body{max-width:100%;overflow-x:hidden;}
body{font-size:13px!important;}
#js-particles{pointer-events:none!important;}
.app-wrap{min-height:100vh;}

/* Stop Bootstrap sidebar template from using old 15rem widths */
#wrapper{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  min-height:100vh!important;
  overflow-x:hidden!important;
}
#sidebar-wrapper{
  flex:0 0 var(--xc-sidebar)!important;
  width:var(--xc-sidebar)!important;
  min-width:var(--xc-sidebar)!important;
  max-width:var(--xc-sidebar)!important;
  margin-left:0!important;
  min-height:100vh!important;
  position:relative!important;
  z-index:20!important;
  overflow:hidden!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
}
#sidebar-wrapper .list-group{
  width:100%!important;
  max-width:100%!important;
  padding:8px 7px!important;
  gap:6px!important;
}
#wrapper.toggled #sidebar-wrapper{
  margin-left:calc(-1 * var(--xc-sidebar))!important;
}
#page-content-wrapper{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:calc(100vw - var(--xc-sidebar))!important;
  position:relative!important;
  z-index:10!important;
}

/* Sidebar links */
.list-group-item.nav-glass{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 10px!important;
  margin:0 0 6px 0!important;
  border-radius:12px!important;
  font-size:12.5px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.list-group-item.nav-glass i{
  width:16px!important;
  min-width:16px!important;
  text-align:center!important;
  margin:0!important;
  font-size:13px!important;
}

/* Top bar */
.navbar{
  min-height:44px!important;
  padding:7px 10px!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.xc-menu-btn,#menu-toggle{
  min-width:34px!important;
  height:34px!important;
  padding:0!important;
  border-radius:11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.navbar .btn-danger,
.navbar a[href="logout.php"]{
  min-height:32px!important;
  padding:6px 12px!important;
  font-size:12px!important;
  border-radius:12px!important;
}

/* Main spacing */
#page-content-wrapper>.container-fluid{
  padding:12px!important;
  max-width:100%!important;
}
#page-content-wrapper>.container-fluid>br:first-child{display:none!important;}
.xcvpn-page{max-width:1360px!important;margin:0 auto!important;}

/* Cards */
.card,
.card.bg-dark,
.xcvpn-card{
  border-radius:16px!important;
  border:1px solid var(--xc-border)!important;
  background:linear-gradient(180deg,rgba(25,31,42,.82),rgba(8,12,20,.82))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}
.card-header{
  padding:10px 14px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.card-header h1,.card-header h2,.card-header h3,.card-header h4{
  font-size:22px!important;
  line-height:1.15!important;
  margin:0!important;
}
.card-header small,.card-header p{
  font-size:12px!important;
  line-height:1.25!important;
  margin:3px 0 0 0!important;
  color:var(--xc-muted)!important;
}
.card-body{padding:12px 14px!important;}

/* Forms */
.form-group{margin-bottom:9px!important;}
.form-label,label{
  font-size:12px!important;
  font-weight:700!important;
  margin-bottom:4px!important;
  color:rgba(255,255,255,.86)!important;
}
.form-control,
.form-select,
select.form-control,
textarea.form-control{
  width:100%!important;
  min-height:36px!important;
  height:auto!important;
  padding:7px 10px!important;
  font-size:13px!important;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(0,0,0,.28)!important;
  color:#fff!important;
  box-shadow:none!important;
}
textarea.form-control{min-height:74px!important;resize:vertical!important;}
.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus{
  border-color:rgba(39,216,255,.75)!important;
  box-shadow:0 0 0 3px rgba(39,216,255,.14)!important;
}
small,.form-text,.text-muted{font-size:11px!important;color:var(--xc-muted)!important;line-height:1.25!important;}
h5,.xcvpn-section-title{font-size:15px!important;font-weight:800!important;margin:12px 0 8px!important;}

/* Buttons */
.btn{
  min-height:32px!important;
  padding:6px 10px!important;
  border-radius:11px!important;
  font-size:12px!important;
  line-height:1.15!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  white-space:nowrap!important;
}
.btn-sm{
  min-height:28px!important;
  padding:5px 8px!important;
  font-size:11.5px!important;
  border-radius:9px!important;
}
.xcvpn-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

/* DataTables and tables */
.dataTables_wrapper{
  width:100%!important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  font-size:12px!important;
  margin:0 0 8px 0!important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  min-height:28px!important;
  height:28px!important;
  padding:3px 8px!important;
  border-radius:10px!important;
  margin-left:5px!important;
  background:rgba(0,0,0,.24)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  font-size:12px!important;
  padding-top:8px!important;
}
.table-responsive,
.xcvpn-table-wrap{
  width:100%!important;
  overflow:auto!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
}
.table{
  margin-bottom:0!important;
}
.table th,
.table td{
  padding:7px 9px!important;
  font-size:12px!important;
  line-height:1.2!important;
  vertical-align:middle!important;
  border-color:rgba(255,255,255,.08)!important;
}
.table thead th{
  background:rgba(12,16,24,.96)!important;
  color:rgba(255,255,255,.86)!important;
  border-bottom:1px solid rgba(255,255,255,.15)!important;
  white-space:nowrap!important;
}
.xcvpn-table{min-width:760px!important;}
.xcvpn-file-name{
  max-width:260px!important;
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.xcvpn-pill{
  display:inline-flex!important;
  align-items:center!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  border:1px solid rgba(39,216,255,.25)!important;
  background:rgba(39,216,255,.11)!important;
  color:#dffaff!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* Alerts/logs */
.alert{
  padding:8px 10px!important;
  border-radius:12px!important;
  font-size:12px!important;
  margin-bottom:10px!important;
}
pre{
  font-size:11.5px!important;
  border-radius:12px!important;
  max-width:100%!important;
}

/* Modals: fix delete/cancel buttons being visible but not clickable */
.modal{z-index:1065!important;}
.modal-backdrop{z-index:1050!important;}
.modal-dialog,.modal-content,.modal-footer,.modal .btn,.modal button{
  pointer-events:auto!important;
  position:relative!important;
  z-index:1070!important;
}
body.modal-open{padding-right:0!important;overflow:hidden!important;}

/* Loading */
#xcvpnLoading{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(4,8,15,.56);
  backdrop-filter:blur(6px);
}
#xcvpnLoading.show{display:flex;}
.xcvpn-loader-box{
  width:min(380px,92vw);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,13,24,.94);
  border-radius:18px;
  padding:18px;
  color:#fff;
  text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.4);
}
.xcvpn-spinner{
  width:34px;height:34px;border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:var(--xc-accent);
  animation:xcspin .8s linear infinite;
  margin:0 auto 10px;
}
@keyframes xcspin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:992px){
  :root{--xc-sidebar:var(--xc-sidebar-mobile);}
  #sidebar-wrapper{
    flex-basis:var(--xc-sidebar-mobile)!important;
    width:var(--xc-sidebar-mobile)!important;
    min-width:var(--xc-sidebar-mobile)!important;
    max-width:var(--xc-sidebar-mobile)!important;
  }
  #wrapper.toggled #sidebar-wrapper{
    margin-left:calc(-1 * var(--xc-sidebar-mobile))!important;
  }
  #page-content-wrapper{
    max-width:calc(100vw - var(--xc-sidebar-mobile))!important;
  }
  #sidebar-wrapper .list-group{padding:7px 5px!important;}
  .list-group-item.nav-glass{
    justify-content:center!important;
    padding:9px 0!important;
    font-size:0!important;
    gap:0!important;
  }
  .list-group-item.nav-glass i{
    font-size:15px!important;
    width:auto!important;
    min-width:0!important;
  }
  #page-content-wrapper>.container-fluid{padding:9px!important;}
  .card-body{padding:10px!important;}
  .card-header{padding:9px 11px!important;}
  .xcvpn-table{min-width:700px!important;}
}

@media(max-width:576px){
  body{font-size:12px!important;}
  #page-content-wrapper>.container-fluid{padding:7px!important;}
  .card-header h1,.card-header h2,.card-header h3,.card-header h4{font-size:18px!important;}
  .btn{font-size:11px!important;padding:5px 8px!important;}
  .form-control,.form-select,select.form-control,textarea.form-control{font-size:12px!important;min-height:34px!important;}
  .table th,.table td{font-size:11px!important;padding:6px 7px!important;}
}

/* V46 mobile stability patch: real phone sidebar + proper content width */
#xc-sidebar-backdrop{display:none;}
#sidebar-wrapper{z-index:1045!important;}
#page-content-wrapper{min-width:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
#page-content-wrapper>.container-fluid{max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important;}

@media(max-width:767.98px){
  #wrapper{display:block!important;overflow-x:hidden!important;}
  #sidebar-wrapper{
    position:fixed!important;
    top:0!important;left:0!important;bottom:0!important;
    width:238px!important;min-width:238px!important;max-width:238px!important;
    height:100vh!important;min-height:100vh!important;
    margin-left:0!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    background:linear-gradient(180deg,rgba(9,14,24,.98),rgba(7,11,18,.98))!important;
    border-right:1px solid rgba(67,220,255,.18)!important;
    box-shadow:24px 0 55px rgba(0,0,0,.45)!important;
  }
  #wrapper.toggled #sidebar-wrapper{transform:translateX(0)!important;}
  body.xc-sidebar-open #xc-sidebar-backdrop{
    display:block!important;position:fixed!important;inset:0!important;
    background:rgba(0,0,0,.54)!important;z-index:1040!important;
    backdrop-filter:blur(2px)!important;
  }
  #page-content-wrapper{width:100vw!important;max-width:100vw!important;min-width:0!important;}
  #page-content-wrapper>.container-fluid{padding:10px!important;width:100%!important;max-width:100%!important;}
  #sidebar-wrapper .list-group{width:100%!important;padding:10px 8px!important;}
  .xc-brand-block{justify-content:flex-start!important;padding:10px 12px!important;}
  .xc-brand-name{display:inline!important;font-size:14px!important;}
  .list-group-item.nav-glass{
    justify-content:flex-start!important;
    font-size:13px!important;
    padding:10px 12px!important;
    gap:10px!important;
    white-space:nowrap!important;
  }
  .list-group-item.nav-glass i{font-size:15px!important;width:20px!important;min-width:20px!important;text-align:center!important;}
  .navbar{position:sticky!important;top:0!important;z-index:1035!important;padding:8px 10px!important;}
  .navbar .btn-danger{padding:6px 9px!important;font-size:11px!important;}
  .xc-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:38px!important;height:34px!important;}
  .table-responsive,.xcvpn-table-shell,.xc-scroll-x{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .provider-panel,.provider-body,.provider-login-card,.provider-preview{width:100%!important;max-width:100%!important;min-width:0!important;}
  .provider-select-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;}
  .provider-option{min-height:44px!important;}
}

@media(max-width:420px){
  #page-content-wrapper>.container-fluid{padding:8px!important;}
  .provider-select-wrap{height:440px!important;max-height:60vh!important;}
  .provider-search input{height:40px!important;font-size:12px!important;}
}
