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

:root{
  --navy: #0a0e27;
  --navy-2: #10163a;
  --card: #131a3d;
  --border: #232b56;
  --blue: #018CFA;
  --blue-2: #02B8FB;
  --purple: #9613F7;
  --deep-blue: #0023AE;
  --grad: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --text: #E7EAF6;
  --text-dim: #9aa3c7;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f59e0b;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--navy); color:var(--text);
  font-family:'Inter',sans-serif; font-size:14px;
}
h1,h2,h3,h4,.brand{font-family:'Poppins',sans-serif;}

a{color:var(--blue-2); text-decoration:none;}

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

.sidebar{
  width:250px; background:var(--navy-2); border-right:1px solid var(--border);
  padding:24px 16px; position:fixed; top:0; bottom:0; left:0; overflow-y:auto;
}
.sidebar .brand{font-size:20px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:28px; padding-left:8px;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  color:var(--text-dim); font-weight:500; margin-bottom:4px; font-size:13.5px;
}
.sidebar nav a:hover{background:rgba(255,255,255,0.05); color:var(--text);}
.sidebar nav a.active{background:var(--grad); color:#fff;}
.sidebar .logout{margin-top:24px; display:block; padding-left:12px; color:var(--text-dim); font-size:13px;}

.main{margin-left:250px; flex:1; padding:28px 32px; max-width:1400px;}

.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.topbar h1{font-size:22px; margin:0;}
.topbar .user{color:var(--text-dim); font-size:13px;}

.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px;
}
.kpi .label{color:var(--text-dim); font-size:12.5px; margin-bottom:6px;}
.kpi .value{font-size:24px; font-weight:700; font-family:'Poppins',sans-serif;}
.kpi .value.blue{color:var(--blue-2);}
.kpi .value.green{color:var(--green);}
.kpi .value.red{color:var(--red);}
.kpi .value.purple{color:var(--purple);}
.kpi .value.orange{color:var(--orange);}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--text-dim); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}

.badge{padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; display:inline-block;}
.badge-blue{background:rgba(1,140,250,0.15); color:var(--blue-2);}
.badge-purple{background:rgba(150,19,247,0.15); color:#c98bfb;}
.badge-green{background:rgba(34,197,94,0.15); color:var(--green);}
.badge-red{background:rgba(239,68,68,0.15); color:var(--red);}
.badge-orange{background:rgba(245,158,11,0.15); color:var(--orange);}

.btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:10px; border:none;
  font-weight:600; font-size:13.5px; cursor:pointer; font-family:'Inter',sans-serif;
}
.btn-primary{background:var(--grad); color:#fff;}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-sm{padding:6px 12px; font-size:12.5px;}
.btn-danger{background:rgba(239,68,68,0.15); color:var(--red); border:1px solid rgba(239,68,68,0.3);}
.btn-green{background:rgba(34,197,94,0.15); color:var(--green); border:1px solid rgba(34,197,94,0.3);}

.actions{display:flex; gap:8px;}

form label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; margin-top:14px; font-weight:500;}
form input, form select, form textarea{
  width:100%; padding:10px 12px; background:var(--navy); border:1px solid var(--border); border-radius:9px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px;
}
form input:focus, form select:focus, form textarea:focus{outline:none; border-color:var(--blue);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-actions{margin-top:24px; display:flex; gap:12px;}

.alert{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px;}
.alert-success{background:rgba(34,197,94,0.12); color:var(--green); border:1px solid rgba(34,197,94,0.25);}
.alert-error{background:rgba(239,68,68,0.12); color:var(--red); border:1px solid rgba(239,68,68,0.25);}

.filters{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filters select, .filters input{width:auto; padding:8px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px;}

.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--navy);}
.login-box{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:40px; width:360px;}
.login-box .brand{font-size:26px; text-align:center; margin-bottom:6px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.login-box p.sub{text-align:center; color:var(--text-dim); margin-bottom:20px; font-size:13px;}

.empty{text-align:center; padding:40px; color:var(--text-dim);}
.text-dim{color:var(--text-dim);}
.mt-0{margin-top:0;}

@media print{
  .sidebar, .topbar, .no-print{display:none !important;}
  .main{margin-left:0 !important;}
  body{background:#fff; color:#000;}
}