/* =========================
   VIP SMS EPIC THEME (Core)
   Glass / Neon / Dark
   ========================= */

:root{
  --epic-bg-0:#05070d;
  --epic-bg-1:#090c14;
  --epic-card:rgba(16,24,38,.68);
  --epic-card-2:rgba(10,16,28,.55);
  --epic-border:rgba(255,255,255,.08);
  --epic-text:#eaf2ff;
  --epic-muted:rgba(234,242,255,.72);
  --epic-accent:#ff2e6d;
  --epic-accent2:#6ee7ff;
  --epic-accent3:#a78bfa;
  --epic-success:#22c55e;
  --epic-warning:#f59e0b;
  --epic-danger:#ef4444;
  --epic-shadow: 0 18px 55px rgba(0,0,0,.55);
  --epic-radius: 16px;
}

html,body{ height:100%; }
body{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(110,231,255,.12), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(167,139,250,.14), transparent 55%),
              radial-gradient(900px 700px at 60% 90%, rgba(255,46,109,.10), transparent 60%),
              linear-gradient(180deg, var(--epic-bg-0), var(--epic-bg-1));
  color: var(--epic-text);
}

a{ color: inherit; }

/* Background layer (optional div) */
.epic-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(900px 600px at 25% 20%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(800px 560px at 75% 15%, rgba(167,139,250,.18), transparent 62%),
    radial-gradient(800px 560px at 60% 85%, rgba(255,46,109,.12), transparent 62%),
    url("../images/epic/bg-aurora.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05);
  opacity: .55;
}

/* Keep content above bg */
#wrapper, .content-page, .content, .container-fluid{ position: relative; z-index: 1; }

/* Topbar */
.topbar{
  background: rgba(8,12,20,.78) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--epic-border);
}
.topbar-left{
  background: linear-gradient(135deg, rgba(255,46,109,.92), rgba(110,231,255,.25)) !important;
  box-shadow: 0 12px 40px rgba(255,46,109,.25);
}
.logo .logo-light,
.logo .logo-sm{ color: #fff !important; letter-spacing:.6px; }
.navbar-custom{
  background: transparent !important;
}

/* Sidebar */
.side-menu, .left.side-menu{
  background: rgba(8,12,20,.78) !important;
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--epic-border);
}
#sidebar-menu .menu-title{
  color: rgba(234,242,255,.60) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin-top: 14px;
}
#sidebar-menu ul li a{
  color: rgba(234,242,255,.76) !important;
  padding: 12px 18px;
  margin: 6px 12px;
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#sidebar-menu ul li a i{ opacity:.9; }
#sidebar-menu ul li a:hover{
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a{
  background: linear-gradient(90deg, rgba(255,46,109,.92), rgba(167,139,250,.35)) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(255,46,109,.22);
}

/* Cards */
.card{
  background: var(--epic-card) !important;
  border: 1px solid var(--epic-border) !important;
  border-radius: var(--epic-radius) !important;
  box-shadow: var(--epic-shadow);
}
.card .header-title, .page-title, .card-title{ color: var(--epic-text) !important; }
.text-muted{ color: var(--epic-muted) !important; }
hr{ border-top: 1px solid rgba(255,255,255,.08) !important; }

/* Buttons */
.btn{
  border-radius: 14px !important;
}
.btn-primary{
  border: 0 !important;
  background: linear-gradient(90deg, var(--epic-accent), var(--epic-accent3)) !important;
  box-shadow: 0 14px 45px rgba(255,46,109,.22);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-success{
  border: 0 !important;
  background: linear-gradient(90deg, var(--epic-success), rgba(110,231,255,.6)) !important;
}
.btn-danger{
  border: 0 !important;
  background: linear-gradient(90deg, var(--epic-danger), rgba(255,46,109,.6)) !important;
}

/* Inputs */
.form-control{
  background: rgba(10,16,28,.62) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--epic-text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(234,242,255,.45) !important; }
.form-control:focus{
  border-color: rgba(110,231,255,.45) !important;
  box-shadow: 0 0 0 .18rem rgba(110,231,255,.14) !important;
}

/* Tables / Datatables */
.table, table{ color: rgba(234,242,255,.86) !important; }
.table thead th{
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(234,242,255,.75) !important;
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: rgba(10,16,28,.62) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--epic-text) !important;
  border-radius: 12px !important;
}

/* Alerts */
.alert{
  border-radius: var(--epic-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,16,28,.55) !important;
  color: rgba(234,242,255,.86) !important;
}
.alert-info{ border-color: rgba(110,231,255,.22) !important; }
.alert-success{ border-color: rgba(34,197,94,.22) !important; }

/* Footer */
.footer{
  background: transparent !important;
  color: rgba(234,242,255,.55) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Subtle animated glow */
@keyframes epicGlow {
  0%{ box-shadow: 0 0 0 rgba(255,46,109,0); }
  50%{ box-shadow: 0 0 30px rgba(110,231,255,.12); }
  100%{ box-shadow: 0 0 0 rgba(255,46,109,0); }
}
.card:hover{ animation: epicGlow 1.6s ease-in-out; }


/* === FORCE DARK TOPBAR (fix white strip on user panel) === */
.topbar, #page-topbar, .navbar-header{
  background: rgba(8,12,20,.78) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--epic-border);
}
.topbar .navbar-custom, .topbar .navbar-custom ul, .topbar .navbar-custom .nav-link{
  background: transparent !important;
}
.topbar .dropdown-menu{
  background: rgba(10,14,24,.92) !important;
  border: 1px solid var(--epic-border) !important;
}