/* ===========================
   AHPC SUPPORT DESK
   Apple + NVIDIA Premium Theme
=========================== */

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

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

body{
font-family:'Inter',sans-serif;
background:#050505;
color:#ffffff;
}

a{
text-decoration:none;
color:#7dd3fc;
}

:root{

--green:#8DFF2F;
--black:#050505;
--dark:#121212;
--card:#1f1f1f;
--border:#3a3a3a;
--white:#ffffff;
--gray:#e5e7eb;
--danger:#ff4d4f;
--warning:#ffd54a;
--success:#22c55e;
--blue:#4f8cff;

}

/* NAVBAR */

.navbar{

background:rgba(18,18,18,.95);

backdrop-filter:blur(18px);

border-bottom:1px solid #333;

height:70px;

padding:0 30px;

display:flex;

align-items:center;

justify-content:space-between;

position:fixed;

top:0;

left:0;

right:0;

z-index:999;

}

.logo{

font-size:24px;

font-weight:700;

color:var(--green);

letter-spacing:1px;

}

/* SIDEBAR */

.sidebar{

position:fixed;

top:70px;

left:0;

width:250px;

height:100%;

background:#101010;

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

padding-top:20px;

}

.sidebar a{

display:block;

padding:16px 25px;

color:#ffffff;

transition:.3s;

font-size:15px;

font-weight:500;

}

.sidebar a:hover{

background:var(--green);

color:#000;

padding-left:35px;

}

/* MAIN */

.main{

margin-left:250px;

margin-top:70px;

padding:30px;

}

/* CARDS */

.card{

background:#1c1c1c;

border:1px solid #3b3b3b;

border-radius:20px;

padding:25px;

margin-bottom:20px;

box-shadow:0 0 35px rgba(141,255,47,.15);

transition:.3s;

}

.card:hover{

transform:translateY(-4px);

box-shadow:0 0 45px rgba(141,255,47,.28);

}

.card p{

color:#f5f5f5;

}

.card h3{

font-size:20px;

margin-bottom:15px;

color:#ffffff;

}

/* DASHBOARD */

.dashboard{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}

.stat{

background:#171717;

border-radius:18px;

padding:25px;

border:1px solid #383838;

transition:.3s;

}

.stat:hover{

border-color:var(--green);

transform:translateY(-5px);

box-shadow:0 0 25px rgba(141,255,47,.25);

}

.stat h2{

font-size:34px;

margin-top:10px;

color:var(--green);

}

.stat span{

color:var(--white);

font-weight:500;

}

/* TABLE */

table{

width:100%;

border-collapse:collapse;

margin-top:15px;

}

th{

background:#222;

padding:15px;

text-align:left;

font-weight:600;

color:#ffffff;

}

td{

padding:15px;

border-bottom:1px solid #353535;

color:#ffffff;

}

tr:hover{

background:#252525;

}

/* FORM */

input,
textarea,
select{

width:100%;

background:#181818;

border:1px solid #444;

padding:14px;

border-radius:12px;

color:#ffffff;

margin-bottom:18px;

font-size:15px;

}

textarea{

min-height:180px;

resize:vertical;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--green);

box-shadow:0 0 12px rgba(141,255,47,.30);

}

/* BUTTON */

.btn{

display:inline-block;

padding:14px 28px;

background:var(--green);

color:#000;

font-weight:700;

border-radius:12px;

border:none;

cursor:pointer;

transition:.3s;

}

.btn:hover{

transform:scale(1.03);

background:#b5ff5e;

}

.btn-danger{

background:var(--danger);

color:white;

}

.btn-blue{

background:var(--blue);

color:white;

}

/* STATUS */

.badge{

padding:7px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

color:#ffffff;

}

.new{

background:#3b82f6;

}

.assigned{

background:#8b5cf6;

}

.progress{

background:#ffd54a;

color:#000;

}

.waiting{

background:#9ca3af;

color:#000;

}

.resolved{

background:#22c55e;

}

.closed{

background:#ef4444;

}

/* PRIORITY */

.low{

background:#22c55e;

padding:6px 12px;

border-radius:30px;

color:white;

}

.medium{

background:#ffd54a;

padding:6px 12px;

border-radius:30px;

color:black;

}

.high{

background:#ff8c42;

padding:6px 12px;

border-radius:30px;

color:white;

}

.critical{

background:#ff3b3b;

padding:6px 12px;

border-radius:30px;

color:white;

}

/* LOGIN */

.login-box{

width:420px;

margin:120px auto;

background:#171717;

padding:40px;

border-radius:22px;

border:1px solid #333;

box-shadow:0 0 40px rgba(141,255,47,.20);

}

.login-box h1{

margin-bottom:30px;

text-align:center;

color:var(--green);

}

/* HERO */

.hero{

padding:140px 60px;

text-align:center;

}

.hero h1{

font-size:56px;

margin-bottom:15px;

color:#ffffff;

}

.hero p{

color:#f3f4f6;

font-size:20px;

margin-bottom:35px;

}

/* FOOTER */

footer{

padding:25px;

text-align:center;

color:#d1d5db;

margin-top:50px;

border-top:1px solid #333;

}

/* RESPONSIVE */

@media(max-width:991px){

.sidebar{

display:none;

}

.main{

margin-left:0;

}

.hero h1{

font-size:36px;

}

.login-box{

width:95%;

}

}

.badge{

font-size:13px;

padding:6px 10px;

border-radius:20px;

}

.low{

background:#22c55e;

padding:6px 12px;

border-radius:20px;

color:white;

}

.medium{

background:#ffd54a;

padding:6px 12px;

border-radius:20px;

color:black;

}

.high{

background:#ff8c42;

padding:6px 12px;

border-radius:20px;

color:white;

}

.critical{

background:#ff3b3b;

padding:6px 12px;

border-radius:20px;

color:white;

}

table tr:hover{

background:#242424;

transition:.3s;

}

.card{

box-shadow:0 0 30px rgba(141,255,47,.20);

transition:.3s;

}

.card:hover{

transform:translateY(-4px);

}

.btn{

border-radius:12px;

}