:root{
  --bg0:#070a10;
  --bg1:#0b1020;
  --card:rgba(255,255,255,0.04);
  --card2:rgba(255,255,255,0.06);
  --bdr:rgba(255,255,255,0.10);
  --txt:rgba(255,255,255,0.92);
  --mut:rgba(255,255,255,0.60);
  --pri:#4f83ff;
  --danger:#ff4f6d;
  --ok:#35d07f;
  --warn:#f0c04a;
  --info:#4fc3ff;
  --r12:12px;
  --r16:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--txt);
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(79,131,255,0.18), transparent 60%),
    radial-gradient(700px 450px at 10% 90%, rgba(53,208,127,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
.app{display:flex; min-height:100vh}
.sidebar{
  width:240px;
  padding:18px 14px;
  border-right:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}
.brand{display:flex; gap:10px; align-items:center; margin-bottom:16px}
.brand-badge{
  width:38px; height:38px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  font-weight:700;
}
.brand-title{font-weight:700}
.brand-sub{font-size:12px; color:var(--mut)}
.nav{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.nav-item{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  color:var(--mut);
  text-decoration:none;
  border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,0.03); color:var(--txt)}
.nav-item.active{background:rgba(79,131,255,0.12); border:1px solid rgba(79,131,255,0.25); color:var(--txt)}
.sidebar-footer{position:absolute; bottom:14px; left:14px; right:14px}
.main{flex:1}
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.22);
  backdrop-filter: blur(12px);
}
.page-title{font-weight:700}
.topbar-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.search{width:360px; max-width:45vw; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.22); color:var(--txt)}
.btn{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:var(--txt);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,0.06)}
.btn.primary{border-color:rgba(79,131,255,0.35); background:rgba(79,131,255,0.12)}
.btn.danger{border-color:rgba(255,79,109,0.35); background:rgba(255,79,109,0.10)}
.content{padding:18px}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r16);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.card.pad{padding:14px}
.grid{display:grid; gap:14px}
.grid.kpi{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width: 1100px){.grid.kpi{grid-template-columns:repeat(2, minmax(0, 1fr))}.search{width:260px}}
@media (max-width: 650px){.grid.kpi{grid-template-columns:1fr}.sidebar{display:none}.search{width:220px}}
.kpi-title{font-size:12px; color:var(--mut); letter-spacing:0.08em; text-transform:uppercase}
.kpi-value{font-size:26px; font-weight:750; margin-top:6px}
.kpi-sub{font-size:12px; color:var(--mut); margin-top:6px}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{font-size:12px; color:var(--mut); text-align:left; padding:0 10px}
.row{
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;
}
.table td{padding:10px; vertical-align:top}
.row td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.row td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.input, select{
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
  color:var(--txt);
  outline:none;
}
textarea.input{min-height:34px; resize:vertical}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); font-size:12px; color:var(--mut)}
.dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,0.40)}
/* Status colors */
.sel-status[data-val="Pending"], .sel-status.pending{border-color:rgba(240,192,74,0.45); background:rgba(240,192,74,0.10)}
.sel-status[data-val="In Progress"], .sel-status.inprogress{border-color:rgba(79,195,255,0.45); background:rgba(79,195,255,0.10)}
.sel-status[data-val="Completed"], .sel-status.completed{border-color:rgba(53,208,127,0.45); background:rgba(53,208,127,0.10)}
.sel-status[data-val="Cancelled"], .sel-status.cancelled{border-color:rgba(255,79,109,0.45); background:rgba(255,79,109,0.10)}
/* Reimbursement colors */
.sel-reimb[data-val="Yes"]{border-color:rgba(53,208,127,0.45); background:rgba(53,208,127,0.10)}
.sel-reimb[data-val="No"]{border-color:rgba(255,79,109,0.45); background:rgba(255,79,109,0.10)}
.sel-reimb[data-val="Pending"]{border-color:rgba(240,192,74,0.45); background:rgba(240,192,74,0.10)}
.sel-reimb[data-val="N/A"]{border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.04)}
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:center; justify-content:center; z-index:50}
.modal{width:min(920px, 92vw); max-height:86vh; overflow:auto; padding:14px; border-radius:18px; background:rgba(10,12,18,0.95); border:1px solid rgba(255,255,255,0.10)}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.modal-title{font-weight:700}
.modal-grid{display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr))}
@media(max-width:820px){.modal-grid{grid-template-columns:1fr}}
.hr{height:1px; background:rgba(255,255,255,0.08); margin:12px 0}
.toast{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.55); color:var(--txt); display:none; z-index:60}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{width:min(420px, 92vw); padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.25); box-shadow:0 20px 60px rgba(0,0,0,0.45)}
.login-title{font-weight:800; font-size:20px}
.login-sub{color:var(--mut); margin-top:6px}
.login-hint{margin-top:10px; color:var(--mut); font-size:12px}