/* ==========================================
   LOGNEXUS DASHBOARD
   PART 1 - LAYOUT & SIDEBAR
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#020617;
    color:#fff;
    font-family:Arial,sans-serif;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

/* ===========================
   MOBILE HEADER
=========================== */

.mobile-header{

    display:none;

    height:70px;

    padding:0 20px;

    background:#081225;

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

    justify-content:space-between;

    align-items:center;

    position:fixed;

    top:0;

    left:0;

    right:0;

    z-index:2000;

}

.mobile-header h2{

    font-size:28px;

    font-weight:700;

}

.mobile-header span{

    color:#22d3ee;

}

#menuBtn{

    background:none;

    border:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

.notification-btn{

    position:relative;

    cursor:pointer;

    font-size:24px;

}

.notification-btn span{

    position:absolute;

    top:-8px;

    right:-8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ef4444;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

}

/* ===========================
   LAYOUT
=========================== */

.dashboard-layout{

    display:flex;

    min-height:100vh;

    background:#020617;

}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:270px;

    height:100vh;

    background:#081225;

    border-right:1px solid rgba(255,255,255,.08);

    padding:30px 20px;

    overflow-y:auto;

    transition:left .3s ease;

    z-index:1500;

}

.sidebar-logo{

    margin-bottom:45px;

}

.sidebar-logo h2{

    font-size:34px;

    color:#fff;

}

.sidebar-logo span{

    color:#22d3ee;

}

.sidebar-logo p{

    color:#94a3b8;

    margin-top:8px;

    font-size:14px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 16px;

    border-radius:14px;

    color:#cbd5e1;

    transition:.25s;

    font-size:15px;

    font-weight:500;

}

.sidebar nav a:hover{

    background:#10203c;

    color:#22d3ee;

}

.sidebar nav a.active{

    background:#22d3ee;

    color:#fff;

}

.sidebar nav i{

    width:22px;

    text-align:center;

}

/* ===========================
   CONTENT
=========================== */

.dashboard-content{

    flex:1;

    margin-left:270px;

    padding:35px;

    min-height:100vh;

}

/* ==========================================
   PART 2 - CONTENT
========================================== */

/* ===========================
   WELCOME
=========================== */

.welcome-section{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}

.welcome-section h1{

    font-size:36px;

    font-weight:700;

    margin-bottom:10px;

}

.welcome-section h1 span{

    color:#22d3ee;

}

.welcome-section p{

    color:#94a3b8;

    font-size:16px;

    line-height:1.6;

}

.primary-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 24px;

    border-radius:14px;

    background:#22d3ee;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.primary-btn:hover{

    background:#0891b2;

    transform:translateY(-2px);

}

/* ===========================
   STATS
=========================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}

.stat-card{

    background:#0f172a;

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

    border-radius:20px;

    padding:25px;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-5px);

    border-color:#22d3ee;

    box-shadow:0 10px 30px rgba(34,211,238,.12);

}

.stat-card p{

    color:#94a3b8;

    font-size:14px;

    margin-bottom:12px;

}

.stat-card h2{

    font-size:30px;

    color:#fff;

}

/* ===========================
   QUICK ACTIONS
=========================== */

.quick-actions{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-bottom:35px;

}

.quick-actions a{

    background:#0f172a;

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

    border-radius:18px;

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    transition:.3s;

}

.quick-actions a:hover{

    border-color:#22d3ee;

    transform:translateY(-4px);

}

.quick-actions i{

    font-size:26px;

    color:#22d3ee;

}

.quick-actions span{

    color:#fff;

    font-size:15px;

}

/* ===========================
   GRID
=========================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.dashboard-card{

    background:#0f172a;

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

    border-radius:20px;

    padding:25px;

    min-height:260px;

}

.dashboard-card h2{

    margin-bottom:20px;

    font-size:22px;

    color:#fff;

}

.full-width{

    grid-column:1 / -1;

}

/* ===========================
   HISTORY ITEMS
=========================== */

.history-item{

    background:#081225;

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

    border-radius:14px;

    padding:18px;

    margin-bottom:15px;

}

.history-item:last-child{

    margin-bottom:0;

}

.history-item h3{

    font-size:16px;

    margin-bottom:8px;

    color:#fff;

}

.history-item p{

    color:#cbd5e1;

    margin-bottom:6px;

}

.history-item span{

    color:#22d3ee;

    font-size:13px;

    font-weight:600;

}

/* ==========================================
   PART 3 - RESPONSIVE
========================================== */

@media (max-width:900px){

body{

overflow-x:hidden;

}

/* ===========================
MOBILE HEADER
=========================== */



.mobile-header{

    display:flex;

    width:100%;

}


/* ===========================
SIDEBAR
=========================== */

.sidebar{

left:-280px;

width:270px;

height:100vh;

position:fixed;

top:0;

background:#081225;

z-index:9999;

box-shadow:0 0 40px rgba(0,0,0,.45);

}

.sidebar.show{

left:0;

}

/* ===========================
CONTENT
=========================== */

.dashboard-content{

margin-left:0;

padding:95px 18px 25px;

width:100%;

}

/* ===========================
WELCOME
=========================== */

.welcome-section{

flex-direction:column;

align-items:flex-start;

}

.welcome-section h1{

font-size:30px;

}

.welcome-section .primary-btn{

width:100%;

justify-content:center;

}

/* ===========================
CARDS
=========================== */

.stats-grid{

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.stat-card{

padding:20px;

}

.stat-card h2{

font-size:24px;

}

/* ===========================
QUICK ACTIONS
=========================== */

.quick-actions{

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.quick-actions a{

padding:18px;

}

/* ===========================
GRID
=========================== */

.dashboard-grid{

grid-template-columns:1fr;

}

.full-width{

grid-column:auto;

}

.dashboard-card{

min-height:auto;

}

}

/* ===========================
SMALL PHONES
=========================== */

@media (max-width:600px){

.stats-grid{

grid-template-columns:1fr;

}

.quick-actions{

grid-template-columns:1fr;

}

.welcome-section h1{

font-size:26px;

}

.dashboard-content{

padding:90px 15px 20px;

}

.dashboard-card{

padding:18px;

}

.stat-card{

padding:18px;

}

.history-item{

padding:15px;

}

.sidebar{

width:250px;

left:-250px;

}

.sidebar.show{

left:0;

}

}

/* ==========================================
   PART 4 - FINAL POLISH
========================================== */

/* Smooth scrolling */

html{

scroll-behavior:smooth;

}

/* Scrollbar */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-track{

background:#020617;

}

::-webkit-scrollbar-thumb{

background:#22d3ee;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#0891b2;

}

/* Card Animation */

.stat-card,
.dashboard-card,
.quick-actions a{

animation:fadeUp .45s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Hover */

.dashboard-card:hover{

border-color:#22d3ee;

box-shadow:0 12px 35px rgba(34,211,238,.12);

}

.sidebar nav a{

transition:.25s;

}

.sidebar nav a:hover{

transform:translateX(6px);

}

/* Notification */

.notification-btn{

transition:.25s;

cursor:pointer;

}

.notification-btn:hover{

transform:scale(1.08);

}

/* Buttons */

.primary-btn{

transition:.25s;

}

.primary-btn:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(34,211,238,.25);

}

/* Empty States */

#recentOrders,
#recentTransactions,
#accountHistory{

display:flex;

flex-direction:column;

gap:15px;

}

.empty-state{

text-align:center;

padding:40px 20px;

color:#94a3b8;

}

.empty-state i{

font-size:48px;

margin-bottom:15px;

color:#22d3ee;

}

/* Loading */

.loading{

padding:30px;

text-align:center;

color:#94a3b8;

}

/* Desktop */

@media(min-width:901px){

.sidebar{

left:0 !important;

}

.mobile-header{

display:none !important;

}

}

/* Tablet */

@media(min-width:601px) and (max-width:900px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.quick-actions{

grid-template-columns:repeat(2,1fr);

}

}

/* Small phones */

@media(max-width:480px){

.mobile-header{

padding:0 15px;

}

.mobile-header h2{

font-size:23px;

}

#menuBtn{

font-size:24px;

}

.sidebar{

width:240px;

left:-240px;

}

.sidebar.show{

left:0;

}

.dashboard-content{

padding:85px 12px 18px;

}

.welcome-section h1{

font-size:24px;

}

.stat-card h2{

font-size:22px;

}

.dashboard-card{

padding:15px;

border-radius:16px;

}

.quick-actions a{

padding:15px;

}

}

/* ==========================================
   MARKETPLACE SUPPORT
========================================== */

.wallet-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.wallet-header h1{

    font-size:36px;

    margin-bottom:8px;

}

.wallet-header p{

    color:#94a3b8;

}

.market-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}

.dash-card{

    background:#0f172a;

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

    border-radius:20px;

    padding:25px;

    transition:.3s;

}

.dash-card:hover{

    transform:translateY(-5px);

    border-color:#22d3ee;

}

.dash-card p{

    color:#94a3b8;

    margin-bottom:10px;

}

.dash-card h2{

    font-size:30px;

}

@media(max-width:900px){

.market-stats{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.market-stats{

grid-template-columns:1fr;

}

}

/* Mobile Sidebar */

@media (max-width:768px){

    .sidebar{

        position:fixed;

        top:0;

        left:-280px;

        width:280px;

        height:100vh;

        z-index:1000;

        transition:left .3s ease;

    }

    .sidebar.show{

        left:0;

    }

}
/* =========================================
   MOBILE SIDEBAR - FINAL FIX
========================================= */

@media (max-width: 900px) {

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: -280px !important;

        width: 270px !important;
        height: 100vh !important;

        display: block !important;

        z-index: 99999 !important;

        overflow-y: auto !important;

        transition: left 0.3s ease !important;
    }

    .sidebar.show {
        left: 0 !important;
    }

    .mobile-header {
        display: flex !important;

        position: sticky !important;
        top: 0 !important;

        z-index: 10000 !important;
    }

    .dashboard-layout {
        display: block !important;
    }

    .dashboard-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

}

/* ==========================================
   REFERRAL PROGRAM
========================================== */

.referral-card {
    margin-top: 25px;
}

.referral-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.referral-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.referral-header h2 i {
    color: #22d3ee;
}

.referral-header p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 14px;
}

.referral-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.referral-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #94a3b8;
}

.referral-input {
    display: flex;
    gap: 10px;
}

.referral-input input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #020617;
    color: #fff;
    outline: none;
}

.referral-input button {
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    background: #22d3ee;
    color: #081225;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.referral-input button:hover {
    opacity: 0.85;
}

.referral-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 5px;
}

.referral-stats > div {
    padding: 18px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid #1e293b;
}

.referral-stats span {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 7px;
}

.referral-stats strong {
    font-size: 22px;
}

@media (max-width: 600px) {

    .referral-input {
        flex-direction: column;
    }

    .referral-input button {
        padding: 12px;
    }

    .referral-stats {
        grid-template-columns: 1fr;
    }

}

/* ==========================================
   FLOATING CUSTOMER SUPPORT
========================================== */

.floating-contact{

    position:fixed;

    right:22px;

    bottom:25px;

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.floating-contact a{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:30px;

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

    transition:.3s ease;

}

.floating-contact a:hover{

    transform:scale(1.12);

}

.floating-whatsapp{

    background:#25D366;

}

.floating-telegram{

    background:#229ED9;

}


/* Mobile */

@media(max-width:600px){

    .floating-contact{

        right:15px;

        bottom:18px;

        gap:12px;

    }

    .floating-contact a{

        width:55px;

        height:55px;

        font-size:25px;

    }

}