@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

:root{
--primary:#00d2ff;
--accent:#3a7bd5;
--bg:#050508;
--panel:rgba(255,255,255,.04);
--border:rgba(255,255,255,.08);
--text:#fff;
--dim:#94a3b8;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Plus Jakarta Sans',sans-serif;
}

body{
background:var(--bg);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
position:relative;
}


/* BACKGROUND */

.mesh-bg{
position:fixed;
inset:0;

background:
radial-gradient(
circle at top left,
rgba(0,210,255,.08),
transparent 35%
),

radial-gradient(
circle at bottom right,
rgba(58,123,213,.08),
transparent 40%
);

z-index:-3;
}

.glow{
position:fixed;
width:450px;
height:450px;
border-radius:50%;
filter:blur(120px);
opacity:.15;
z-index:-2;
animation:float 10s infinite alternate;
}

.glow1{
background:#00d2ff;
left:-100px;
top:-100px;
}

.glow2{
background:#3a7bd5;
right:-100px;
bottom:-100px;
}

@keyframes float{

from{
transform:translateY(-40px);
}

to{
transform:translateY(40px);
}

}


/* NAVBAR */

.top-nav{

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

padding:22px 40px;

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

backdrop-filter:blur(20px);

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

position:sticky;
top:0;
z-index:999;
}

.logo{

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

font-size:22px;
font-weight:800;

letter-spacing:2px;
color:var(--primary);
}

.nav-right{

display:flex;
align-items:center;
gap:20px;
}

.admin-user{

padding:12px 18px;

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

border-radius:16px;

border:
1px solid var(--border);
}

#adminName{

font-weight:700;
font-size:13px;

}

#adminRole{

font-size:11px;
color:var(--primary);

margin-top:4px;
}

.home-btn{

text-decoration:none;
color:white;

padding:12px 20px;

border-radius:14px;

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

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

transition:.3s;
}

.home-btn:hover{

transform:translateY(-4px);

background:
rgba(0,210,255,.15);

}


/* CONTAINER */

.container{

max-width:1400px;

margin:auto;

padding:40px 25px;

}


/* STATS */

.stats-grid{

display:grid;

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

gap:25px;

margin-bottom:35px;

}

@media(max-width:1000px){

.stats-grid{

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

}

}

@media(max-width:650px){

.stats-grid{

grid-template-columns:
1fr;

}

}


.stat-card{

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

padding:28px;

background:var(--panel);

border-radius:28px;

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

backdrop-filter:
blur(20px);

transition:.4s;
}

.stat-card:hover{

transform:
translateY(-8px);

border-color:
var(--primary);

box-shadow:
0 20px 50px rgba(0,0,0,.4);

}

.stat-icon{

width:65px;
height:65px;

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

border-radius:18px;

font-size:24px;

background:
rgba(0,210,255,.08);

color:var(--primary);

}

.stat-title{

font-size:13px;
color:var(--dim);

margin-bottom:5px;
}

.stat-number{

font-size:28px;
font-weight:800;
}


/* SEARCH */

.search-box{

position:relative;

margin-bottom:35px;
}

.search-box i{

position:absolute;

left:18px;
top:50%;

transform:
translateY(-50%);

color:var(--dim);

}

.search-box input{

width:100%;

padding:18px 20px 18px 50px;

background:var(--panel);

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

border-radius:18px;

color:white;

outline:none;

font-size:14px;
}

.search-box input:focus{

border-color:
var(--primary);

}


/* ORDERS PANEL */

.orders-panel{

padding:30px;

background:var(--panel);

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

border-radius:30px;

backdrop-filter:
blur(20px);

}

.panel-header{

margin-bottom:30px;
}

.panel-header h2{

font-size:24px;
}


/* ORDER CARD */

.order-card{

padding:25px;

margin-bottom:18px;

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

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

border-radius:22px;

transition:.3s;
cursor:pointer;
}

.order-card:hover{

transform:
translateY(-5px);

border-color:
var(--primary);

}

.order-top{

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

margin-bottom:12px;
}

.order-id{

font-weight:800;
}

.order-email{

font-size:13px;
color:var(--dim);

margin-top:6px;
}

.order-bottom{

margin-top:15px;

display:flex;
justify-content:space-between;
align-items:center;
}


/* STATUS */

.status{

padding:8px 14px;

border-radius:50px;

font-size:12px;
font-weight:700;
}

.pending{

background:
rgba(255,180,0,.15);

color:#ffbf00;
}

.verified{

background:
rgba(0,255,130,.12);

color:#00ff88;
}

.rejected{

background:
rgba(255,70,70,.12);

color:#ff4d4d;
}


/* MODAL */

.modal{

display:none;

position:fixed;
inset:0;

background:
rgba(0,0,0,.7);

z-index:9999;

justify-content:center;
align-items:center;
}

.modal-content{

width:90%;
max-width:700px;

padding:35px;

border-radius:30px;

background:rgba(10,10,15,.95);

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

position:relative;
}

.close-btn{

position:absolute;

top:15px;
right:20px;

font-size:30px;

cursor:pointer;
}

.close-btn:hover{

color:var(--primary);
}

/* action buttons */

.verify-btn,
.reject-btn,
.proof-btn{

border:none;
outline:none;

padding:12px 18px;

border-radius:14px;

font-size:13px;
font-weight:800;

cursor:pointer;

transition:.35s;

display:flex;
align-items:center;
justify-content:center;
gap:8px;

backdrop-filter:blur(20px);

}


/* verify */

.verify-btn{

background:
rgba(0,255,136,.12);

border:
1px solid rgba(0,255,136,.25);

color:#00ff88;

}

.verify-btn:hover{

transform:
translateY(-4px);

background:
rgba(0,255,136,.2);

box-shadow:
0 10px 30px
rgba(0,255,136,.25);

}


/* reject */

.reject-btn{

background:
rgba(255,77,77,.12);

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

color:#ff4d4d;

}

.reject-btn:hover{

transform:
translateY(-4px);

background:
rgba(255,77,77,.2);

box-shadow:
0 10px 30px
rgba(255,77,77,.25);

}


/* proof */

.proof-btn{

background:
rgba(0,210,255,.12);

border:
1px solid rgba(0,210,255,.25);

color:#00d2ff;

}

.proof-btn:hover{

transform:
translateY(-4px);

background:
rgba(0,210,255,.2);

box-shadow:
0 10px 30px
rgba(0,210,255,.25);

}


/* active click effect */

.verify-btn:active,
.reject-btn:active,
.proof-btn:active{

transform:
scale(.96);

}


/* mobile */

@media(max-width:768px){

.verify-btn,
.reject-btn,
.proof-btn{

width:100%;

}

}

/* MEMBERSHIP PANEL */

.membership-panel{

margin-top:35px;

padding:30px;

border-radius:30px;

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

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

backdrop-filter:blur(25px);

}

.membership-panel h2{

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

font-size:24px;
margin-bottom:25px;

}

.membership-panel h2 i{

color:#00d2ff;

}

.membership-box{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.membership-box input,
.membership-box select{

flex:1;

padding:16px;

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

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

border-radius:16px;

color:white;

outline:none;

font-size:14px;

}

.membership-box select{

cursor:pointer;

}

.membership-box option{

background:#111;
color:white;

}

#updateMembership{

padding:16px 25px;

border:none;

border-radius:16px;

font-weight:800;

background:#00d2ff;

color:black;

cursor:pointer;

transition:.3s;

}

#updateMembership:hover{

transform:translateY(-3px);

box-shadow:
0 10px 25px
rgba(0,210,255,.35);

}

.badge-select{

padding:12px 15px;
border-radius:12px;
border:none;
outline:none;

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

color:white;

backdrop-filter:
blur(10px);

cursor:pointer;

font-weight:600;

}

.badge-select option{

background:#111;
color:white;

}

/* ================= MOBILE OPTIMIZATIONS ================= */

/* Tablet & Smaller (Max 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 20px 15px;
    }
}

/* Standard Mobile (Max 768px) */
@media (max-width: 768px) {
    /* 1. Navbar - Stack or Reduce Padding */
    .top-nav {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .nav-right {
        width: 100%;
        justify-content: center;
    }

    /* 2. Order Cards - Stack Action Buttons */
    .order-card .order-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .order-card .order-top .status {
        align-self: flex-start;
    }

    /* Force Verify/Reject/Proof buttons to stack */
    .order-card div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .verify-btn, .reject-btn, .proof-btn {
        width: 100%;
        justify-content: center;
        padding: 15px; /* Bigger touch target for fingers */
    }

    /* 3. Membership Manager - Full Width Inputs */
    .membership-box {
        flex-direction: column;
    }

    .membership-box input, 
    .membership-box select, 
    #updateMembership {
        width: 100%;
        flex: none;
    }

    /* 4. Stats - Adjust Font Sizes */
    .stat-number {
        font-size: 22px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}

/* Small Phones (Max 480px) */
@media (max-width: 480px) {
    .logo {
        font-size: 18px;
    }

    .admin-user {
        display: none; /* Hide admin name on tiny screens to save space */
    }

    .panel-header h2, 
    .membership-panel h2 {
        font-size: 20px;
    }

    /* Modal adjustments */
    .modal-content {
        padding: 20px;
        width: 95%;
    }
}