/* =====================================================================
   Xenx Protocol Theme - design-only re-skin
   Violet (#8b5cf6) + silver on deep space black (#06040f).
   This file ONLY restyles; it touches no markup logic or data.
   Loaded LAST so it overrides the base nj_theme / bootstrap / admin CSS.
   ===================================================================== */

:root {
  --xx-bg:        #06040f;
  --xx-bg-2:      #0d0a1c;
  --xx-surface:   rgba(19, 14, 40, 0.85);
  --xx-glass:     rgba(255, 255, 255, 0.04);
  --xx-violet:    #8b5cf6;
  --xx-violet-2:  #a78bfa;
  --xx-deep:      #6d28d9;
  --xx-silver:    #d6d8e0;
  --xx-text:      #ebe9f7;
  --xx-muted:     #9d9ab8;
  --xx-border:    rgba(255, 255, 255, 0.08);
  --xx-violet-bd: rgba(139, 92, 246, 0.35);
  --xx-grad:      linear-gradient(135deg, #a78bfa, #8b5cf6 55%, #6d28d9);
  --xx-glow:      0 14px 40px -8px rgba(139, 92, 246, 0.45);
}

/* ============================= BASE ============================= */
html, body {
  background: var(--xx-bg) !important;
  color: var(--xx-text) !important;
  overflow-x: hidden !important;
  max-width: 100%;
}
body {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(109,40,217,.12), transparent 60%),
    var(--xx-bg) !important;
  min-height: 100vh;
}
::selection { background: var(--xx-violet); color: #fff; }
a { color: var(--xx-violet-2); }
a:hover, a:focus { color: var(--xx-violet); }

/* starfield texture */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.30) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 50%, rgba(167,139,250,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,.20) 50%, transparent 51%);
  background-size: 640px 640px, 720px 720px, 560px 560px, 800px 800px, 900px 900px, 620px 620px, 700px 700px, 760px 760px;
  opacity: .8;
}

/* scrollbar */
* { scrollbar-color: rgba(139,92,246,.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--xx-bg-2); }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.65); }

/* ===================== LOGO (CSS swap) ===================== */
img[src*="logo.png"], img[src*="logo/logo"], .pm-logo img, .navbar-brand img {
  content: url("images/xenx-logo.png");
  height: 44px !important;
  width: auto !important;
  object-fit: contain;
}

/* ===================== FLOATING GLOW SHAPES ===================== */
.bg-shape { filter: blur(95px) !important; opacity: .35 !important; }
.bg-shape.one   { background: #6d28d9 !important; }
.bg-shape.two   { background: #8b5cf6 !important; }
.bg-shape.three { background: #4c1d95 !important; }

/* ===================== MEMBER APP CHROME ===================== */
.pm-header, .pm-footer, .pm-sidebar {
  background: rgba(13,10,28,.92) !important;
  border-color: rgba(139,92,246,.18) !important;
  backdrop-filter: blur(14px);
}
.pm-user { display: none !important; }
.pm-logo { margin-left: auto !important; }
.pm-logo img { margin-left: 0 !important; }

.pm-menu-btn {
  background: var(--xx-bg-2) !important;
  border: 1px solid var(--xx-violet-bd) !important;
  color: var(--xx-violet-2) !important;
}

.pm-nav a, .pm-footer-menu a { color: #8f8ba8 !important; }
.pm-nav a:hover, .pm-footer-menu a:hover { color: var(--xx-violet-2) !important; }
.pm-nav .active a, .pm-footer-menu .active a,
.pm-nav .active i, .pm-footer-menu .active i { color: var(--xx-violet-2) !important; }
.pm-nav li:last-child a, .pm-footer-menu .pm-logout a { color: #ff6b6d !important; }

/* center home button */
.pm-home a {
  background: var(--xx-grad) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px -6px rgba(139,92,246,.6) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pm-home i { color: #fff !important; }

/* sidebar links */
.pm-sidebar ul li a { color: #cfcbe6 !important; }
.pm-sidebar ul li a:hover {
  background: rgba(139,92,246,.12) !important;
  color: var(--xx-violet-2) !important;
}

/* ===================== CARDS / GLASS PANELS ===================== */
.card, .tf-container, .panel, .panel-default, .widget, .dash-card {
  background: var(--xx-surface) !important;
  border: 1px solid rgba(139,92,246,.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
  color: var(--xx-text) !important;
  animation: xxFadeUp .6s cubic-bezier(.2,.7,.2,1) both;
}
.card:hover, .panel:hover, .dash-card:hover {
  border-color: var(--xx-violet-bd) !important;
  box-shadow: 0 24px 60px -20px rgba(139,92,246,.35) !important;
  transition: box-shadow .4s ease, border-color .4s ease;
}
.card-header, .panel-heading {
  background: rgba(139,92,246,.08) !important;
  border-color: rgba(139,92,246,.16) !important;
  color: var(--xx-violet-2) !important;
}
.panel-title, .card-title { color: var(--xx-violet-2) !important; }

/* ===================== BUTTONS ===================== */
.btn_theme, .btn-primary, .btn-info, .btn-success,
.btn-default.btn-primary, input[type="submit"].btn, .swal2-confirm {
  background: var(--xx-grad) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  box-shadow: var(--xx-glow) !important;
  transition: transform .25s ease, box-shadow .35s ease, filter .25s ease !important;
}
.btn_theme:hover, .btn-primary:hover, .btn-info:hover, .btn-success:hover,
input[type="submit"].btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 22px 55px -10px rgba(139,92,246,.65) !important;
  filter: brightness(1.08);
  color: #fff !important;
}
.btn-outline-primary, .btn-outline-info {
  border: 1px solid var(--xx-violet-bd) !important;
  color: var(--xx-violet-2) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-info:hover {
  background: rgba(139,92,246,.14) !important;
  color: var(--xx-violet-2) !important;
}
.btn-secondary, .btn-default {
  background: var(--xx-glass) !important;
  border: 1px solid var(--xx-border) !important;
  color: var(--xx-text) !important;
}
.btn-danger { background: linear-gradient(135deg,#ff7a7c,#e23b3e) !important; border: none !important; }

/* ===================== FORMS ===================== */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="date"] {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--xx-text) !important;
  border-radius: 12px !important;
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus,
input:focus {
  border-color: var(--xx-violet) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder { color: #6f6c8a !important; }
.form-check-input:checked { background-color: var(--xx-violet) !important; border-color: var(--xx-violet) !important; }
label { color: #cfcbe6 !important; }

/* ===================== TEXT ACCENTS ===================== */
.text-info, .text-primary { color: var(--xx-violet-2) !important; }
.text-success { color: #34d399 !important; }
.text-gradient {
  background: linear-gradient(100deg, #fff, #d6d8e0 40%, #a78bfa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.bg-primary, .bg-info { background: var(--xx-grad) !important; color:#fff !important; }
.bg-success { background: linear-gradient(135deg,#34d399,#059669) !important; color:#fff !important; }
.badge, .label {
  background: rgba(139,92,246,.16) !important;
  color: var(--xx-violet-2) !important;
  border: 1px solid rgba(139,92,246,.28) !important;
}
.badge-danger, .label-danger { background: rgba(255,107,109,.15) !important; color:#ff8b8d !important; border-color: rgba(255,107,109,.3) !important; }

/* ===================== TABLES ===================== */
.table, table.gridview, .gvTheGrid { color: #cfcbe6 !important; }
.table th, table th, thead th {
  color: var(--xx-violet-2) !important;
  border-color: rgba(139,92,246,.18) !important;
  background: rgba(139,92,246,.06) !important;
}
.table td, table td { border-color: rgba(255,255,255,.06) !important; }
.table-striped > tbody > tr:nth-of-type(odd),
table tr:nth-of-type(even) { background: rgba(255,255,255,.02) !important; }
.table-hover > tbody > tr:hover, table tr:hover { background: rgba(139,92,246,.07) !important; }

/* grid pager (ASP.NET) */
.gridpagerstyle { background: transparent !important; color: var(--xx-violet-2) !important; }
.gridpagerstyle span { background: var(--xx-grad) !important; color:#fff !important; border:none !important; border-radius:8px !important; }
.gridpagerstyle a { background: var(--xx-glass) !important; color: var(--xx-text) !important; border:1px solid var(--xx-border) !important; border-radius:8px !important; }
.gridpagerstyle a:hover { background: rgba(139,92,246,.2) !important; color: var(--xx-violet-2) !important; }

/* ===================== ADMIN TEMPLATE ===================== */
#wrapper, #page-wrapper, .main-page, .content-wrapper { background: var(--xx-bg) !important; }
.top-navbar, .navbar-default, .navbar-static-top, .navbar.navbar-default {
  background: rgba(13,10,28,.92) !important;
  border-color: rgba(139,92,246,.18) !important;
}
.navbar-default .navbar-nav > li > a, .navbar-brand, .navbar-top-links > li > a { color: var(--xx-text) !important; }
.navbar-default .navbar-nav > li > a:hover { color: var(--xx-violet-2) !important; }
.sidebar, .sidebar-nav, .nav-second-level, .side-menu, #sidebar-wrapper {
  background: rgba(13,10,28,.96) !important;
  border-color: rgba(139,92,246,.14) !important;
}
.sidebar .nav > li > a, .side-menu li a, .nav-second-level li a { color: #cfcbe6 !important; }
.sidebar .nav > li > a:hover, .sidebar .nav > li.active > a,
.side-menu li a:hover, .side-menu li.active > a {
  background: rgba(139,92,246,.12) !important;
  color: var(--xx-violet-2) !important;
  border-left: 3px solid var(--xx-violet) !important;
}
.page-header, h1, h2, h3, h4, h5 { color: #fff; }

/* ===================== PRELOADER ===================== */
.preload, .preload-container { background: var(--xx-bg) !important; }
.spinner { border-top-color: var(--xx-violet) !important; }
.preload-logo {
  background-image: url('images/xenx-square.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ===================== ELEGANT TOUCHES + ANIMATIONS ===================== */
@keyframes xxFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes xxShimmer {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* sheen sweep across primary buttons */
.btn_theme, .btn-primary { position: relative; overflow: hidden; }
.btn_theme::after, .btn-primary::after {
  content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
}
.btn_theme:hover::after, .btn-primary:hover::after { animation: xxShimmer 1s ease; }

@keyframes xxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.page-body > * { animation: xxFadeIn .5s ease both; }

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--xx-violet); outline-offset: 2px;
}

hr { border-color: rgba(139,92,246,.18) !important; }
.border, .border-top, .border-bottom { border-color: var(--xx-border) !important; }

/* ===================== PUBLIC LANDING PAGE VARIABLES ===================== */
:root {
  --brand1: #8b5cf6 !important;
  --brand2: #6d28d9 !important;
  --brand3: #a78bfa !important;
  --good:   #34d399 !important;
  --bg:     #06040f !important;
  --bg2:    #0d0a1c !important;
}
.btn-grad, .cta, .btn-cta, .hero-btn {
  background: var(--xx-grad) !important;
  color: #fff !important; border: none !important;
}
.text-brand, .brand, .highlight { color: var(--xx-violet-2) !important; }