/* CONNECTIK — premium dark-glass overlay (loads after mikhmon-ui.connectik.min.css) */

:root{
  --cx-bg-0:#0B0620;
  --cx-bg-glow-1:#301A72;
  --cx-bg-glow-2:#170C3B;
  --cx-accent:#6C3CFF;
  --cx-accent-light:#8A5CFF;
  --cx-accent-deep:#5527D6;
  --cx-text:#F1EEFC;
  --cx-text-muted:#A79EC7;
  --cx-border:rgba(255,255,255,.10);
  --cx-border-soft:rgba(255,255,255,.07);
  --cx-glass:rgba(255,255,255,.045);
}

html{background:var(--cx-bg-0);}
body{
  background:radial-gradient(1200px 680px at 26% -12%, var(--cx-bg-glow-1) 0%, var(--cx-bg-glow-2) 45%, var(--cx-bg-0) 78%) fixed!important;
  color:var(--cx-text)!important;
  min-height:100vh;
}
body::before,body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
body::before{width:760px;height:760px;top:-360px;right:-260px;background:radial-gradient(circle, rgba(139,92,255,.22), transparent 70%);}
body::after{width:620px;height:620px;bottom:-320px;left:-220px;background:radial-gradient(circle, rgba(84,36,190,.18), transparent 70%);}

.wrapper,#main,.login-box,.register-box{position:relative;z-index:1;}

/* Cards -> glass panels */
.card{
  background:var(--cx-glass)!important;
  border:1px solid var(--cx-border)!important;
  border-radius:16px!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55);
  color:var(--cx-text);
}
.card-header{
  background:transparent!important;
  border-bottom:1px solid var(--cx-border-soft)!important;
  color:var(--cx-text)!important;
  padding:14px 18px!important;
}
.card-header .card-title,.card-header h3{color:var(--cx-text)!important;font-weight:700;}
.card-title>i:first-of-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--cx-accent-light), var(--cx-accent-deep));
  color:#fff!important;
  font-size:12px;
  box-shadow:0 4px 12px -3px rgba(108,60,255,.55);
  margin-right:2px;
}

.box{color:var(--cx-text)!important;}
.box.box-bordered{
  background:var(--cx-glass)!important;
  border-radius:13px!important;
}

/* Tables inside cards */
.table{background:transparent!important;}
.table td,.table th,.table td a,th{color:var(--cx-text)!important;}
.table-bordered td,.table-bordered th{border-color:var(--cx-border)!important;}
.table-hover tbody tr:hover{background:rgba(255,255,255,.045)!important;}

/* Links inside content */
.card a,#main a{color:#C9BBFF;}
.card a:hover,#main a:hover{color:#E4DBFF;}

/* Sidebar */
.sidenav{
  background:rgba(255,255,255,.03)!important;
  border-right:1px solid var(--cx-border)!important;
  backdrop-filter:blur(18px);
}
#brand{color:#fff!important;}
.sidenav a,.dropdown-btn{color:var(--cx-text-muted)!important;}
.sidenav a:hover,.dropdown-btn:hover{
  background:linear-gradient(135deg, rgba(138,92,255,.30), rgba(108,60,255,.14))!important;
  color:#fff!important;
  border-radius:10px;
}
.active{
  background:linear-gradient(135deg, rgba(138,92,255,.35), rgba(108,60,255,.16))!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(158,122,255,.35);
}

/* Top navbar */
.navbar{
  background:rgba(20,11,50,.55)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(139,92,255,.35)!important;
}

/* Inputs */
.form-control,.group-item{
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--cx-border)!important;
  color:var(--cx-text)!important;
}
.form-control::placeholder{color:#736C93;}
.form-control:focus,.group-item:focus{
  border-color:rgba(139,102,255,.75)!important;
  box-shadow:0 0 0 3px rgba(108,60,255,.18)!important;
}
/* Native <option> dropdown lists ignore the translucent glass background and
   render solid white, which combined with the light text above becomes
   unreadable (white on white) - give them an explicit opaque dark surface. */
.form-control option,.group-item option,
.form-control optgroup,.group-item optgroup{
  background:#170C3B!important;
  color:var(--cx-text)!important;
}

/* Buttons — rounded, glass-glow treatment for every color variant so action
   buttons read as one system regardless of which page/report they're on. */
.btn,.btn-login{
  border-radius:11px!important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover,.btn-login:hover{transform:translateY(-1px);filter:brightness(1.06);}
.btn:active,.btn-login:active{transform:translateY(0);}

.bg-primary,.btn-login.bg-primary{
  background:linear-gradient(135deg, var(--cx-accent-light) 0%, var(--cx-accent) 55%, var(--cx-accent-deep) 100%)!important;
  border:none!important;
  box-shadow:0 8px 22px -6px rgba(108,60,255,.55);
}
.btn.bg-danger,.btn.bg-red,.btn-login.bg-danger,.btn-login.bg-red{
  background:linear-gradient(135deg,#FF9BAE 0%,#F86C6B 55%,#D6504F 100%)!important;
  border:none!important;
  color:#fff!important;
  box-shadow:0 8px 22px -6px rgba(248,108,107,.5);
}
.btn.bg-warning,.btn.bg-yellow,.btn-login.bg-warning,.btn-login.bg-yellow{
  background:linear-gradient(135deg,#FFE29A 0%,#FFC107 55%,#DDA300 100%)!important;
  border:none!important;
  color:#3B2900!important;
  box-shadow:0 8px 22px -6px rgba(255,193,7,.45);
}
.btn.bg-green,.btn.bg-success,.btn-login.bg-green,.btn-login.bg-success{
  background:linear-gradient(135deg,#8FEFC0 0%,#4DBD74 55%,#379957 100%)!important;
  border:none!important;
  color:#04321E!important;
  box-shadow:0 8px 22px -6px rgba(77,189,116,.45);
}
.btn.bg-blue,.btn.bg-info,.btn-login.bg-blue,.btn-login.bg-info{
  background:linear-gradient(135deg,#8FDBFF 0%,#20A8D8 55%,#1786AD 100%)!important;
  border:none!important;
  color:#052738!important;
  box-shadow:0 8px 22px -6px rgba(32,168,216,.45);
}
.btn.bg-secondary,.btn-login.bg-secondary{
  background:rgba(255,255,255,.08)!important;
  border:1px solid var(--cx-border)!important;
  color:var(--cx-text)!important;
  box-shadow:none;
}

/* Login card */
.login-box .card{max-width:440px;margin:0 auto;}

/* Misc surfaces -> glass */
.box-bordered,.group-item{border-color:var(--cx-border)!important;}
.modal-window>div{
  background:rgba(20,11,50,.92)!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border)!important;
  border-radius:16px!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}

/* Segmented filter bars (Day|Month|Year|Filter, etc.): soften the sharp
   3px corners from the base theme to match the rest of the glass system. */
.group-item-l{border-radius:10px 0 0 10px!important;}
.group-item-r{border-radius:0 10px 10px 0!important;}
.group-item-r.pointer{
  transition:filter .12s ease, transform .12s ease;
}
.group-item-r.pointer:hover{filter:brightness(1.15);}
#notify{border-color:var(--cx-border)!important;}
.spa{border-color:var(--cx-border)!important;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)!important;border-color:var(--cx-border)!important;}

/* Dashboard — info boxes (system date/time, board, resources, revenue) */
.box-group{display:flex;align-items:flex-start;}
.box-group-icon{
  background:rgba(138,92,255,.14)!important;
  color:#B49CFF!important;
  border-radius:12px!important;
  font-size:19px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0 12px 0 0!important;
}
.box-group-area{font-size:12.5px;line-height:1.75;color:#C9C2E8;padding:2px 0 0;}
.box-group-area>span>b,.box-group-area b{color:var(--cx-text);}

/* Stat tiles (dashboard cards, PPPoE report KPIs, etc.): glass tiles with
   color-coded numbers instead of solid fills - applied app-wide, not just
   the hotspot dashboard row, so every ".box.bg-*" tile matches regardless
   of which page it's on. */
.box.bg-blue,.box.bg-green,.box.bg-yellow,.box.bg-red,.box.bg-primary,.box.bg-info,.box.bg-danger,.box.bg-warning,.box.bg-success{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--cx-border-soft)!important;
  border-radius:13px!important;
  color:var(--cx-text)!important;
}
.box.bg-blue a,.box.bg-green a,.box.bg-yellow a,.box.bg-red a,.box.bg-primary a,.box.bg-info a,.box.bg-danger a,.box.bg-warning a,.box.bg-success a{color:inherit;}
.box.bg-blue h1,.box.bg-green h1,.box.bg-yellow h1,.box.bg-red h1,.box.bg-primary h1,.box.bg-info h1,.box.bg-danger h1,.box.bg-warning h1,.box.bg-success h1{font-weight:700;}
.box.bg-blue h1,.box.bg-info h1{color:#7FD4FF;}
.box.bg-green h1,.box.bg-success h1{color:#6EEAB8;}
.box.bg-yellow h1,.box.bg-warning h1{color:#FFC98A;}
.box.bg-red h1,.box.bg-danger h1{color:#FF9AC4;}
.box.bg-primary h1{color:#C9BBFF;}
/* the label under the big number: an h1 always precedes it as a sibling,
   whether or not the tile content is wrapped in a clickable <a> */
.box.bg-blue h1+div,.box.bg-green h1+div,.box.bg-yellow h1+div,.box.bg-red h1+div,
.box.bg-primary h1+div,.box.bg-info h1+div,.box.bg-danger h1+div,.box.bg-warning h1+div,.box.bg-success h1+div{
  color:#8C83AE;font-size:12px;font-weight:400;
}

/* Dashboard — traffic chart card, sits on the glass panel */
#trafficMonitor .highcharts-background{fill:transparent;}
#trafficMonitor .highcharts-grid-line{stroke:rgba(255,255,255,.07);}
#trafficMonitor .highcharts-axis-line{stroke:rgba(255,255,255,.12);}