/* MYVPN Ultra Glass Theme (Black/Grey + Sky Blue accents)
   Dark backgrounds + shiny glass panels. Sky blue is used only as an accent.
*/

:root{
  --bg0:#050607;
  --bg1:#0b0d10;
  --bg2:#101318;

  /* keep panels darker (less grey) */
  --glass:rgba(10,12,16,.62);
  --glass2:rgba(7,8,10,.46);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);

  --text:#f3f6ff;
  --muted:rgba(243,246,255,.70);

  --sky1:#5ee7ff;
  --sky2:#1ea7ff;

  --radius:18px;
  --radius2:22px;

  --shadow1:0 10px 26px rgba(0,0,0,.55);
  --shadow2:0 18px 48px rgba(0,0,0,.68);
  --glow:0 0 0 1px rgba(94,231,255,.22), 0 0 22px rgba(30,167,255,.18);
}

html,body{height:100%;}
body{
  color:var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 52%, var(--bg2));
  background-attachment: fixed;
}

/* Login (index.php)
   Keep the canvas behind the UI and style a proper glass login card.
*/
#three-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 42px 16px;
}
.login-card{
  width: min(480px, 92vw);
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  position:relative;
  z-index:2;
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(115deg, rgba(255,255,255,.10), transparent 40%, rgba(255,255,255,.05));
  opacity:.55;
  pointer-events:none;
}
.login-card .logo{
  max-width: 420px;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display:block;
  margin: -6px auto 10px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.65));
}
.login-card h1{margin-top: 10px !important;}
.btn-login{width:100%;}
.footer-link{color: rgba(94,231,255,.92) !important;}
.footer-link:hover{color: rgba(94,231,255,1) !important;}

/* Keep particles always behind the UI */
#js-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
}
.particles-js-canvas-el{position:absolute !important; inset:0 !important;}

/* shiny glass sheen + a tiny hint of sky */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px circle at 15% 10%, rgba(94,231,255,.06), transparent 55%),
    radial-gradient(900px circle at 85% 18%, rgba(30,167,255,.05), transparent 58%),
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 45%, rgba(255,255,255,.03));
  pointer-events:none;
  /* blend modes can behave oddly on some devices; keep it subtle */
  mix-blend-mode:soft-light;
  opacity:.95;
  z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px);
  pointer-events:none;
  opacity:.28;
  z-index:0;
}

.app-wrap, #wrapper, #page-content-wrapper{position:relative; z-index:2;}

/* Content spacing + layout polish */
#page-content-wrapper .container-fluid{padding: 18px 18px 26px;}
.navbar{margin: 12px 12px 0;}

/* DataTables + pagination */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background: var(--glass2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.page-link{
  background: var(--glass2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.page-item.active .page-link{
  box-shadow: var(--glow) !important;
  border-color: rgba(94,231,255,.45) !important;
}

/* Button ripple */
.ripple{position:relative;}
.ripple::after{
  content:"";
  position:absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(94,231,255,.35), transparent 65%);
  transform: translate(-50%,-50%) scale(1);
  border-radius:999px;
  opacity:0;
  animation: ripple .45s ease-out;
  pointer-events:none;
}
@keyframes ripple{
  0%{opacity:.9; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(22);}
}

/* Links */
a{color:rgba(94,231,255,.95); text-decoration:none;}
a:hover{color:rgba(94,231,255,1); text-decoration:underline;}
small,.text-muted{color:var(--muted) !important;}
h1,h2,h3,h4,h5{color:var(--text) !important;}


/* Action buttons in tables: keep Edit + Delete side-by-side */
td.action-cell{white-space:nowrap !important;}
.action-buttons{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.action-buttons .btn{
  padding: 7px 14px !important;
  min-width: 72px;
}

/* Slightly different accents */
.action-buttons .btn-danger{
  border-color: rgba(255,110,110,.26) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(255,110,110,.08) !important;
}
.action-buttons .btn-primary{
  border-color: rgba(94,231,255,.26) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(94,231,255,.10) !important;
}


/* Sidebar */
#sidebar-wrapper{
  background: linear-gradient(180deg, rgba(14,16,20,.78), rgba(9,10,12,.58)) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
#sidebar-wrapper::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 40%);
  pointer-events:none;
  opacity:.55;
}
#sidebar-wrapper .sidebar-heading{
  color:var(--text) !important;
  font-weight:800;
  letter-spacing:.3px;
  padding: 18px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#sidebar-wrapper .list-group{background:transparent !important;}
#sidebar-wrapper .list-group-item{color:var(--text) !important; border:none !important;}

/* Sidebar buttons: same "black glass + sky accent" style as main buttons */
#sidebar-wrapper .list-group-item.nav-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) ,
              linear-gradient(180deg, rgba(12,14,18,.92), rgba(8,9,11,.92)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  margin: 8px 12px !important;
  width: calc(100% - 24px);
  padding: 11px 14px !important;
  position:relative;
  overflow:hidden;
  text-decoration:none !important;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .14s ease, filter .18s ease, box-shadow .18s ease;
}

/* Darker card headers (avoid the "flat grey" look) */
.card-header,
.modal-header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(10,12,16,.92), rgba(6,7,9,.92)) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
#sidebar-wrapper .list-group-item.nav-glass::before{
  content:"";
  position:absolute; left:-20%; top:-60%;
  width:140%; height:120%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 55%);
  transform: rotate(8deg);
  opacity:.60;
  pointer-events:none;
}
#sidebar-wrapper .list-group-item.nav-glass::after{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, rgba(94,231,255,0), rgba(94,231,255,.9), rgba(30,167,255,.85), rgba(94,231,255,0));
  opacity:.65;
  pointer-events:none;
}
#sidebar-wrapper .list-group-item.nav-glass i{color: rgba(94,231,255,.95) !important; width:18px; text-align:center;}

#sidebar-wrapper .list-group-item.nav-glass:hover{
  transform: translateX(3px) translateY(-1px) scale(1.01);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.62), var(--glow), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Active page highlight */
#sidebar-wrapper .list-group-item.nav-glass.active{
  border-color: rgba(94,231,255,.42) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.62), var(--glow), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Telegram line: slightly smaller */
#sidebar-wrapper span .list-group-item.nav-glass{
  font-weight:700;
  font-size:.92rem;
  opacity:.95;
}

/* Top navbar */
.navbar{
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius2) !important;
  box-shadow: var(--shadow1) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Core glass surfaces */
.card,
.container,
.main-container,
.w3-container,
.w3-card,
.w3-card-2,
.w3-card-4,
.table,
table,
.modal-content,
.dropdown-menu{
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius2) !important;
  box-shadow: var(--shadow1) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Extra shine on panels */
.card, .main-container, .modal-content, table{position:relative; overflow:hidden;}
.card::after,
.main-container::after,
.modal-content::after,
table::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(115deg, rgba(255,255,255,.11), transparent 40%, rgba(255,255,255,.05));
  opacity:.18;
  pointer-events:none;
}

/* Tables */
.table, table{width:100%; border-collapse:separate !important; border-spacing:0 !important;}
th,td{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  color:var(--text) !important;
  padding: 9px 10px !important; /* tighter columns */
}
th{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(12,14,18,.88), rgba(8,9,11,.88)) !important;
  color: rgba(243,246,255,.94) !important;
}
tbody tr td{background: rgba(7,8,10,.52) !important;}
tbody tr:nth-child(even) td{background: rgba(9,10,12,.46) !important;}
tr:hover td{background: rgba(94,231,255,.055) !important;}

/* Inputs */
input,select,textarea,.form-control,.form-control-file{
  background: var(--glass2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
input::placeholder, textarea::placeholder, .form-control::placeholder{color: rgba(243,246,255,.55) !important;}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color: rgba(94,231,255,.55) !important;
  box-shadow: var(--glow) !important;
  outline:none !important;
  background: rgba(9,10,12,.58) !important;
}

/* Buttons: dark glass + sky accents */
button, .btn, input[type=submit], input[type=button]{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) ,
              linear-gradient(180deg, rgba(14,16,20,.92), rgba(9,10,12,.92)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  letter-spacing:.2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .14s ease, filter .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
button::before, .btn::before, input[type=submit]::before, input[type=button]::before{
  content:"";
  position:absolute; left:-20%; top:-60%;
  width: 140%; height: 120%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 55%);
  transform: rotate(8deg);
  opacity:.55;
  pointer-events:none;
}
button:hover, .btn:hover, input[type=submit]:hover, input[type=button]:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
button:active, .btn:active, input[type=submit]:active, input[type=button]:active{
  transform: translateY(0) scale(.99);
  filter: brightness(.98);
}

.btn-primary, .btn-info{
  border-color: rgba(94,231,255,.38) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.55), var(--glow), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-primary::after, .btn-info::after{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, rgba(94,231,255,0), rgba(94,231,255,.9), rgba(30,167,255,.85), rgba(94,231,255,0));
  opacity:.9;
}

/* Click ripple (used by assets/theme.js) */
.ripple{
  --rx: var(--x, 50%);
  --ry: var(--y, 50%);
}
.ripple::after{
  content:"";
  position:absolute;
  left:var(--rx);
  top:var(--ry);
  width:10px;
  height:10px;
  transform: translate(-50%,-50%);
  border-radius:999px;
  background: radial-gradient(circle, rgba(94,231,255,.35), rgba(255,255,255,.10), transparent 70%);
  animation: ripplePop .45s ease-out forwards;
  pointer-events:none;
}
@keyframes ripplePop{
  from{opacity:.9; transform:translate(-50%,-50%) scale(.5);}
  to{opacity:0; transform:translate(-50%,-50%) scale(18);}
}

.btn-secondary, .btn-default{
  border-color: rgba(255,255,255,.18) !important;
}

.btn-success{
  border-color: rgba(94,231,255,.22) !important;
}

.btn-danger{
  border-color: rgba(255,255,255,.22) !important;
}

/* Badges */
.badge, .w3-badge{
  background: rgba(94,231,255,.14) !important;
  border: 1px solid rgba(94,231,255,.22) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
}

/* Make bootstrap cards/sections look consistent */
hr{border-color: rgba(255,255,255,.10) !important;}


/* V46 unified control / modal styling */
:root{
  --xc-control-h: 40px;
  --xc-radius: 14px;
  --xc-panel-bg: #0b1320;
  --xc-panel-bg2: #101b2c;
  --xc-border: rgba(67,220,255,.20);
  --xc-border-hot: rgba(67,220,255,.48);
  --xc-text: #f4f8ff;
  --xc-muted: #9bb5ca;
}
.form-control,
.custom-select,
select.form-control,
input.form-control,
button.btn,
a.btn,
.btn{
  min-height: var(--xc-control-h) !important;
  height: var(--xc-control-h) !important;
  border-radius: var(--xc-radius) !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}
textarea.form-control{height:auto!important;min-height:90px!important;}
.form-control,
.custom-select,
select.form-control,
input.form-control{
  background: #090f19 !important;
  border: 1px solid var(--xc-border) !important;
  color: var(--xc-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus,
input.form-control:focus{
  background:#0a1422!important;
  color:#fff!important;
  border-color: var(--xc-border-hot)!important;
  box-shadow:0 0 0 .16rem rgba(67,220,255,.12), inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.form-control::placeholder,
input::placeholder{color:rgba(166,190,210,.72)!important;font-size:12px!important;}
select option{background:#0b1320!important;color:#f4f8ff!important;}
.dropdown-menu,
.ui-menu,
.autocomplete-items{
  background:linear-gradient(135deg,#0b1320,#101b2c)!important;
  border:1px solid var(--xc-border)!important;
  border-radius:14px!important;
  color:#f4f8ff!important;
  box-shadow:0 18px 42px rgba(0,0,0,.45)!important;
}
.dropdown-item{color:#f4f8ff!important;border-radius:10px!important;}
.dropdown-item:hover,.dropdown-item:focus{background:#174558!important;color:#fff!important;}
.modal-content{
  background:linear-gradient(135deg,#0b1320,#101b2c)!important;
  border:1px solid var(--xc-border)!important;
  border-radius:18px!important;
  color:#f4f8ff!important;
  box-shadow:0 24px 60px rgba(0,0,0,.60)!important;
}
.modal-header,.modal-footer{border-color:rgba(67,220,255,.16)!important;}
.close{color:#fff!important;text-shadow:none!important;opacity:.9!important;}
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
.btn-login{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 15px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(18,24,34,.86))!important;
  color:#f8fbff!important;
  box-shadow:0 12px 26px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.17)!important;
  text-decoration:none!important;
}
.btn:hover,
a.btn:hover,
button.btn:hover,
.btn-login:hover{
  border-color:rgba(67,220,255,.60)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.56), 0 0 20px rgba(67,220,255,.12), inset 0 1px 0 rgba(255,255,255,.22)!important;
  transform:translateY(-1px);
}
.btn-danger,.btn-outline-danger{border-color:rgba(255,110,110,.36)!important;}
.btn-success{border-color:rgba(54,235,165,.36)!important;}
.btn-primary,.btn-info{border-color:rgba(67,220,255,.42)!important;}
.btn-warning{border-color:rgba(255,210,95,.36)!important;}
.btn-sm{min-height:34px!important;height:34px!important;border-radius:12px!important;padding:0 11px!important;font-size:12px!important;}
.icon-btn{width:34px!important;min-width:34px!important;padding:0!important;}