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

:root{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --border:#E4E8EC;
  --primary:#146356;
  --primary-dark:#0E4A40;
  --accent:#E8A33D;
  --text:#14181C;
  --muted:#6B7280;
  --danger:#D9455F;
  --success:#1F9D55;
  --pending:#B8860B;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; font-size:14px;
}
h1,h2,h3{font-family:'Sora',sans-serif; margin:0 0 4px;}
a{color:inherit; text-decoration:none;}

.layout{display:flex; min-height:100vh;}
.sidebar{
  width:230px; background:var(--primary-dark); color:#fff;
  flex-shrink:0; padding:24px 0; position:sticky; top:0; height:100vh;
}
.brand{ font-family:'Sora',sans-serif; font-weight:700; font-size:18px; padding:0 24px 24px; }
.brand span{display:block; font-size:12px; font-weight:400; color:#9DB8B1; margin-top:2px;}
.sidebar nav{display:flex; flex-direction:column;}
.sidebar nav a{
  padding:11px 24px; color:#CFE0DC; font-weight:500; border-left:3px solid transparent;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--accent);}
.nav-icon{display:inline-block; width:20px;}
.sidebar nav a.logout{margin-top:24px; color:#E8B4B4;}

.content{flex:1; padding:28px 32px; max-width:1200px;}

.page-title{margin-bottom:20px;}
.page-title p{color:var(--muted); margin:2px 0 0; font-size:13px;}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px;}
.stat-card .label{color:var(--muted); font-size:12.5px; margin-bottom:6px;}
.stat-card .value{font-family:'Sora',sans-serif; font-size:24px; font-weight:700;}
.stat-card.accent{border-top:3px solid var(--accent);}
.stat-card.primary{border-top:3px solid var(--primary);}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:20px;}
.panel h2{font-size:16px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border);}
th{color:var(--muted); font-weight:600; font-size:12.5px;}
tr:last-child td{border-bottom:none;}

.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600;}
.badge.pending{background:#FDF3DC; color:var(--pending);}
.badge.approved{background:#E4F7EA; color:var(--success);}
.badge.rejected{background:#FCE8EB; color:var(--danger);}
.badge.active{background:#E4F7EA; color:var(--success);}
.badge.inactive{background:#F1F2F4; color:var(--muted);}

.btn{
  display:inline-block; padding:8px 16px; border-radius:7px; border:none; cursor:pointer;
  font-weight:600; font-size:13.5px; font-family:'Inter',sans-serif;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-sm{padding:5px 11px; font-size:12.5px;}

form.inline{display:inline;}
input[type=text], input[type=number], input[type=password], input[type=url], textarea, select{
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:7px;
  font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--text);
}
label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:0 0 5px;}
.field{margin-bottom:14px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.alert{padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:13.5px;}
.alert.success{background:#E4F7EA; color:var(--success);}
.alert.error{background:#FCE8EB; color:var(--danger);}

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--primary-dark);
}
.login-box{background:#fff; padding:36px 32px; border-radius:14px; width:340px;}
.login-box h1{font-size:20px; margin-bottom:2px;}
.login-box p{color:var(--muted); font-size:13px; margin:0 0 20px;}
.login-box button{width:100%; margin-top:8px; padding:11px;}

@media(max-width:800px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative; padding:14px 0;}
  .sidebar nav{flex-direction:row; overflow-x:auto; gap:4px; padding:0 12px;}
  .sidebar nav a{padding:8px 12px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .sidebar nav a.active{border-left:none; border-bottom-color:var(--accent);}
  .brand{padding:0 16px 10px;}
  .content{padding:18px;}
  .row{grid-template-columns:1fr;}
}