body {
  margin:0;
  font-family: Inter, sans-serif;
  background:#0B0F1A;
  color:white;
}

/* LAYOUT */
.layout {
  display:flex;
  min-height:100vh;
}

.main {
  flex:1;
  padding:40px;
}

/* SIDEBAR */
.sidebar {
  width:240px;
  background:#0F172A;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sidebar h1 {
  font-size:20px;
  margin-bottom:30px;
}

/* NAV */
.nav a {
  display:block;
  padding:12px;
  margin-bottom:6px;
  border-radius:8px;
  text-decoration:none;
  color:#9CA3AF;
  cursor:pointer;
}

.nav a:hover {
  background:#1F2937;
  color:white;
}

.nav a.active {
  background:linear-gradient(90deg,#7C3AED,#6366F1);
  color:white;
  font-weight:600;
}

/* BUTTONS */
.btn {
  padding:10px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  color:white;
}

.blue { background:#2563EB; }
.green { background:#16A34A; }
.red { background:#DC2626; }
.yellow { background:#FACC15; color:black; }
.purple { background:#7C3AED; }

/* INPUT */
input, select {
  background:#0B0F1A;
  border:1px solid #1F2937;
  padding:10px;
  border-radius:6px;
  color:white;
}

/* CARDS */
.card {
  background:#111827;
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
}

/* GRID */
.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* PROGRESS */
.progress {
  background:#1F2937;
  height:8px;
  border-radius:10px;
  overflow:hidden;
}

.bar {
  height:100%;
  width:0%;
  background:#7C3AED;
}

/* LOG */
.log {
  font-size:13px;
  color:#9CA3AF;
}

/* LOGOUT */
.logout {
  background:#DC2626;
  padding:10px;
  border:none;
  border-radius:8px;
  color:white;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:768px){
  .grid { grid-template-columns:1fr; }
}
table {
  width:100%;
  border-collapse: collapse;
  margin-top:10px;
}

th, td {
  padding:12px;
  text-align:left;
  border-bottom:1px solid #1F2937;
}

th {
  color:#9CA3AF;
  font-size:13px;
}

tr:hover {
  background:#0F172A;
}
.status {
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
}

.status.pending { background:#F59E0B; color:black; }
.status.approved { background:#16A34A; }
.status.failed { background:#DC2626; }

body { 
  background:#020617; 
  color:white; 
  font-family:sans-serif; 
  padding:30px;
}

/* CARD */
.card { 
  background:#0f172a; 
  padding:20px; 
  border-radius:12px; 
  margin-bottom:20px;
}

/* LOGIN ONLY */
#loginBox input, 
#loginBox button { 
  width:100%; 
  padding:12px; 
  margin-top:10px; 
  border-radius:8px; 
  border:none;
}

#loginBox button {
  background:linear-gradient(90deg,#7C3AED,#6366F1);
  color:white;
  cursor:pointer;
  font-weight:600;
}

/* DASHBOARD BUTTONS */
button {
  padding:8px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:14px;
}

/* SMALL BUTTON VARIANTS */
.btn {
  display:inline-block;
  width:auto;
}

.btn-primary { background:#6366f1; color:white; }
.btn-danger { background:#DC2626; color:white; }

/* TABLE */
table { 
  width:100%; 
  margin-top:20px;
  border-collapse:collapse;
}

td,th { 
  padding:10px; 
  border-bottom:1px solid #1e293b;
  text-align:left;
}

tr:hover {
  background:#0b1220;
}

/* STATUS BADGE */
.status {
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
}

.status.active { background:#16A34A; }
.status.pending { background:#F59E0B; color:black; }
.status.inactive { background:#DC2626; }