/* =========================================================
   YUXO DARK GRADIENT SAAS UI v2
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{

--yx-primary:#2563eb;
--yx-primary-dark:#1d4ed8;
--yx-secondary:#facc15;

--yx-gradient:
linear-gradient(
135deg,
#2563eb 0%,
#3b82f6 50%,
#facc15 100%
);

--yx-bg:#070b16;

--yx-sidebar:
rgba(10,15,29,.98);

--yx-navbar:
rgba(12,18,34,.78);

--yx-card:
rgba(16,24,40,.92);

--yx-card-soft:
rgba(30,41,59,.70);

--yx-text:#f8fafc;

--yx-text-soft:#94a3b8;

--yx-border:
rgba(255,255,255,.05);

--yx-radius:24px;

--yx-shadow:
0 14px 40px rgba(0,0,0,.26);

--yx-transition:
all .25s ease;
}


/* BASE */

html,
body{

font-family:'Inter',sans-serif!important;

background:
radial-gradient(
circle at top right,
rgba(37,99,235,.14),
transparent 35%
),

radial-gradient(
circle at bottom left,
rgba(250,204,21,.08),
transparent 35%
),

var(--yx-bg)!important;

color:var(--yx-text)!important;

overflow-x:hidden;

letter-spacing:-0.01em;
}

body{
position:relative;
}


/* MOUSE GLOW */

.yx-mouse-glow{

position:fixed;

width:420px;
height:420px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(250,204,21,.08),
rgba(37,99,235,.06),
transparent 70%
);

pointer-events:none!important;

z-index:-1!important;

transform:translate(-50%,-50%);

filter:blur(12px);
}


/* SCROLLBAR */

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-thumb{

background:
rgba(37,99,235,.45);

border-radius:100px;
}


/* NAVBAR */

.header-navbar{

background:
var(--yx-navbar)!important;

backdrop-filter:blur(18px);

border-bottom:
1px solid var(--yx-border);

box-shadow:none!important;

min-height:74px;
}


/* SIDEBAR */

.main-menu{

background:
linear-gradient(
180deg,
rgba(8,14,28,.98),
rgba(16,24,40,.98)
)!important;

border-right:
1px solid var(--yx-border);

box-shadow:none!important;

z-index:999!important;
}

.main-menu,
.main-menu *{
pointer-events:auto!important;
}

.main-menu .navbar-header{

height:78px;

border-bottom:
1px solid rgba(255,255,255,.04);
}

.navigation{

padding:14px 10px;
}

.navigation .navigation-header{

font-size:11px;

color:#64748b;

font-weight:700;

text-transform:uppercase;

letter-spacing:.09em;

padding-left:18px;
}

.navigation .nav-item{

margin-bottom:6px;
}

.navigation .nav-item>a{

height:52px;

padding:0 16px;

border-radius:18px;

display:flex!important;

align-items:center;

color:#cbd5e1!important;

font-weight:600;

transition:.25s ease;
}

.navigation .nav-item>a:hover{

background:
rgba(37,99,235,.12);

transform:translateX(2px);

color:#fff!important;
}

.navigation .nav-item.active>a{

background:
var(--yx-gradient)!important;

color:#fff!important;

box-shadow:
0 18px 38px rgba(37,99,235,.25);
}

.navigation .nav-item.active>a i,
.navigation .nav-item.active>a span{

color:#fff!important;
}


/* CONTENT */

.app-content{
background:transparent!important;
}

.content-wrapper{
padding:2rem!important;
}


/* TITLES */

h1,h2,h3,h4,h5,
.card-title,
.content-header-title{

color:#fff!important;

font-weight:700!important;

letter-spacing:-0.03em;
}

.text-muted{
color:var(--yx-text-soft)!important;
}


/* CARDS */

.card{

background:
linear-gradient(
145deg,
rgba(16,24,40,.98),
rgba(30,41,59,.84)
)!important;

border:
1px solid var(--yx-border)!important;

border-radius:28px!important;

box-shadow:
var(--yx-shadow)!important;

overflow:hidden;

transition:
var(--yx-transition);

position:relative;
}

.card:hover{

transform:translateY(-3px);
}

.card-header{

background:transparent!important;

border-bottom:
1px solid rgba(255,255,255,.04)!important;

padding:1.5rem!important;
}

.card-body{
padding:1.6rem!important;
}


/* DASHBOARD KPI */

.yx-stat-card::before{

content:'';

position:absolute;

left:0;
top:0;

height:5px;
width:100%;

background:
var(--yx-gradient);
}

.yx-stat-icon{

width:68px;
height:68px;

border-radius:22px;

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(37,99,235,.18),
rgba(250,204,21,.16)
);

backdrop-filter:blur(12px);
}

.yx-stat-icon i{

color:#60a5fa;

width:30px!important;
height:30px!important;
}

.yx-stat-card h2{
color:#fff!important;
}


/* CHART */

.yx-chart-card{

background:
linear-gradient(
180deg,
rgba(16,24,40,.98),
rgba(16,24,40,.86)
)!important;
}


/* TABLE */

.table tbody tr{

background:
rgba(17,24,39,.72);
}

.table td,
.table th{

border-color:
rgba(255,255,255,.03)!important;

color:#e2e8f0;
}


/* BUTTONS */

.btn{

border-radius:14px!important;

font-weight:600!important;

border:none!important;
}

.btn-primary{

background:
var(--yx-gradient)!important;

box-shadow:
0 14px 30px rgba(37,99,235,.24);
}


/* INPUT */

.form-control,
.form-select{

background:
rgba(15,23,42,.70)!important;

border:
1px solid rgba(255,255,255,.06)!important;

color:#fff!important;

min-height:50px;

border-radius:14px!important;
}

.form-control:focus,
.form-select:focus{

border-color:
rgba(37,99,235,.5)!important;

box-shadow:
0 0 0 4px rgba(37,99,235,.14)!important;
}


/* TOAST */

#toast-container{

top:20px!important;

right:50%!important;

transform:
translateX(50%)!important;

z-index:999999!important;
}

.toast{

border-radius:16px!important;
}

.toast-success{

background:
var(--yx-gradient)!important;
}


/* OVERLAY FIX */

.content-overlay,
.drag-target,
.sidenav-overlay{

pointer-events:none!important;
}


/* MOBILE */

@media(max-width:991px){

.content-wrapper{
padding:1rem!important;
}

.card-body,
.card-header{
padding:1.1rem!important;
}

}

/* =========================================================
   FORCE YUXO SIDEBAR DARK
   ========================================================= */

.main-menu,
.vertical-layout.vertical-menu-modern .main-menu,
.main-menu.menu-light,
.main-menu.menu-dark {

background:
linear-gradient(
180deg,
#08101f 0%,
#111827 50%,
#0f172a 100%
) !important;

background-color:#0f172a!important;

border-right:
1px solid rgba(255,255,255,.04)!important;
}


.main-menu .navbar-header{

background:transparent!important;
}


.main-menu .shadow-bottom{
display:none!important;
}


.main-menu .navigation{

background:transparent!important;
}


.main-menu .navigation li a{

color:#cbd5e1!important;
}


.main-menu .navigation li.active>a{

background:
linear-gradient(
135deg,
#2563eb,
#facc15
)!important;

color:#fff!important;
}


.main-menu .navigation li>a:hover{

background:
rgba(37,99,235,.10)!important;
}


.main-menu .navigation-header{

color:#64748b!important;
}
/* =========================================================
   YUXO LIVE DASHBOARD SYSTEM
   ========================================================= */

.yx-hero-card{

position:relative;

overflow:hidden;

padding:2rem;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(37,99,235,.22),
rgba(17,24,39,.92),
rgba(250,204,21,.10)
)!important;

border:
1px solid rgba(255,255,255,.05);

min-height:240px;
}

.yx-hero-card::before{

content:'';

position:absolute;

right:-80px;
top:-80px;

width:260px;
height:260px;

border-radius:50%;

background:
rgba(255,255,255,.03);
}

.yx-dashboard-title{

font-size:2rem;

font-weight:800;

line-height:1.1;

margin-bottom:1rem;
}

.yx-dashboard-desc{

max-width:720px;

font-size:1rem;

line-height:1.8;

color:#94a3b8;
}


/* QUICK ACTIONS */

.yx-quick-actions{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:1.6rem;
}

.yx-quick-btn{

height:52px;

padding:0 22px;

border-radius:18px;

display:flex;
align-items:center;
gap:10px;

font-weight:700;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.06);

color:#fff!important;

transition:.25s ease;
}

.yx-quick-btn:hover{

transform:translateY(-2px);

background:
rgba(37,99,235,.18);
}


/* KPI */

.yx-stat-card{

position:relative;

overflow:hidden;
}

.yx-stat-card::before{

content:'';

position:absolute;

left:0;
top:0;

width:100%;
height:4px;

background:
var(--yx-gradient);
}

.yx-stat-card h2{

font-size:2rem!important;

font-weight:800!important;

letter-spacing:-0.04em;
}

.yx-stat-card .avatar{

transform:scale(1.2);
}


/* LIVE ACTIVITY */

.yx-live-card{

height:100%;
}

.yx-live-item{

display:flex;

gap:14px;

padding:14px 0;

border-bottom:
1px solid rgba(255,255,255,.04);
}

.yx-live-item:last-child{
border-bottom:none;
}

.yx-live-dot{

width:10px;
height:10px;

border-radius:50%;

margin-top:7px;

background:#22c55e;

box-shadow:
0 0 14px #22c55e;
}

.yx-live-content h6{

margin-bottom:4px;

font-size:.92rem;
}

.yx-live-content span{

font-size:.8rem;

color:#64748b;
}


/* CHART */

.apexcharts-tooltip{

background:#0f172a!important;

border:none!important;

box-shadow:
0 10px 30px rgba(0,0,0,.35)!important;
}


/* SMOOTH HOVER */

.card{

transition:
transform .22s ease,
box-shadow .22s ease!important;
}

.card:hover{

transform:translateY(-3px);

box-shadow:
0 22px 45px rgba(0,0,0,.30)!important;
}

.yx-premium-dashboard{

position:relative;
padding:10px;
}


.yx-dashboard-orb{

position:fixed;
border-radius:50%;
filter:blur(90px);
pointer-events:none;
z-index:0;
}


.orb-one{

width:420px;
height:420px;
background:rgba(37,99,235,.16);
top:-120px;
right:-120px;
}


.orb-two{

width:380px;
height:380px;
background:rgba(250,204,21,.10);
bottom:-120px;
left:-120px;
}


.yx-workspace-hero{

position:relative;
z-index:2;

display:grid;
grid-template-columns:1.3fr .7fr;
gap:20px;

margin-bottom:20px;
}


.yx-workspace-left,
.yx-operations-panel{

background:rgba(17,24,39,.82);
backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.05);