:root{
    --green:#0d5a3d;
    --green-2:#16704c;
    --gold:#c9962e;
    --gold-soft:#f3e7c8;
    --ink:#17221d;
    --muted:#6c7771;
    --bg:#f5f7f5;
    --white:#fff;
    --border:#e4e9e5;
    --shadow:0 10px 30px rgba(18,39,29,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app{display:flex;min-height:100vh}
.sidebar{
    width:285px;flex:0 0 285px;background:#fff;border-right:1px solid var(--border);
    position:sticky;top:0;height:100vh;overflow:auto
}
.brand{padding:25px 24px 12px;border-bottom:1px solid #f0f2f0}
.brand img{width:100%;max-width:220px;height:auto;display:block;margin:auto}
.admin-title{padding:20px 25px 12px}
.admin-title span{display:block;font-size:11px;font-weight:800;letter-spacing:1.7px;color:var(--gold)}
.admin-title small{display:block;margin-top:5px;color:#87918b;font-size:12px}
.menu{padding:8px 13px 30px}
.menu-group{margin:5px 0}
.menu-item{
    width:100%;border:0;background:transparent;display:flex;align-items:center;gap:11px;
    padding:12px 12px;border-radius:10px;color:#38433d;text-align:left;font-weight:700;font-size:13px
}
.menu-item:hover,.menu-item.active{background:#edf5f0;color:var(--green)}
.menu-item .icon{
    width:27px;height:27px;display:grid;place-items:center;border-radius:8px;
    background:#f0f3f1;color:var(--green);font-size:10px;font-weight:800
}
.menu-item.active .icon{background:var(--green);color:#fff}
.menu-item b{margin-left:auto;color:#9aa49e}
.submenu{display:none;padding:3px 0 7px 48px}
.submenu.open{display:block}
.submenu button{
    display:block;width:100%;border:0;background:transparent;text-align:left;
    padding:8px 7px;color:#727d76;font-size:12px;border-radius:7px
}
.submenu button:hover{background:#f4f7f5;color:var(--green)}
.main{min-width:0;flex:1}
.topbar{
    height:82px;background:#fff;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 35px
}
.page-kicker,.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--gold)}
.topbar h1{font-size:20px;margin:5px 0 0}
.top-actions{display:flex;align-items:center;gap:18px}
.status{font-size:12px;color:#69756e}
.status span{display:inline-block;width:7px;height:7px;background:#26a269;border-radius:50%;margin-right:5px}
.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:800;font-size:12px}
.mobile-toggle{display:none;border:0;background:transparent;font-size:22px}
.content{max-width:1450px;margin:auto;padding:28px 35px 50px}
.welcome{
    display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px;
    background:linear-gradient(115deg,#0d5a3d,#176c4b);color:#fff;border-radius:15px;padding:26px 28px;
    box-shadow:var(--shadow)
}
.welcome h2{font-size:24px;margin:7px 0 6px}
.welcome p{margin:0;color:#dbe9e1;font-size:13px}
.welcome .eyebrow{color:#f0d58f}
.date-box{border:1px solid rgba(255,255,255,.2);padding:12px 15px;border-radius:10px;font-size:12px;color:#e8f0eb;white-space:nowrap}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}
.stat-card{
    background:#fff;border:1px solid var(--border);border-radius:13px;padding:19px;display:flex;gap:14px;
    align-items:center;box-shadow:var(--shadow)
}
.stat-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:900}
.green .stat-icon{background:#e7f3ec;color:var(--green)}
.blue .stat-icon{background:#eaf1f8;color:#2b638f}
.orange .stat-icon{background:#fff3dc;color:#a16d0d}
.dark .stat-icon{background:#edf0ef;color:#37423d}
.stat-card small{display:block;color:#77827b;font-size:11px}
.stat-card strong{display:block;font-size:23px;margin:2px 0}
.stat-card span{font-size:10px;color:#9aa29d}
.module-panel{background:#fff;border:1px solid var(--border);border-radius:15px;padding:25px;box-shadow:var(--shadow)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.panel-heading h3{font-size:20px;margin:5px 0 0}
.description{margin:18px 0;color:#6d7871;font-size:13px;line-height:1.6}
.primary{
    border:0;background:var(--green);color:#fff;padding:10px 15px;border-radius:9px;font-size:12px;font-weight:800
}
.primary:hover{background:#08472f}
.secondary{border:1px solid var(--border);background:#fff;color:#56615b;padding:10px 15px;border-radius:9px;font-size:12px;font-weight:700}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.quick-grid button{
    border:1px solid var(--border);background:#fbfcfb;border-radius:10px;padding:13px 14px;text-align:left;
    color:#3c4841;font-size:12px;font-weight:700
}
.quick-grid button:hover{border-color:#bfd6c8;background:#f4f9f6;color:var(--green)}
.quick-grid span{float:right;color:var(--gold);font-size:16px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:collapse;min-width:650px}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid #edf0ee;font-size:12px}
th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#77817b;background:#fafbfa}
td{color:#465149}
.empty-row td{text-align:center;color:#9aa39e;padding:35px}
footer{border-top:1px solid var(--border);padding:18px 35px;color:#8a948e;font-size:10px;display:flex;justify-content:space-between}
.modal{position:fixed;inset:0;background:rgba(12,25,19,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.show{display:flex}
.modal-card{background:#fff;width:min(520px,100%);border-radius:15px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.2)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.modal-head h3{margin:5px 0 0;font-size:19px}
.close{border:0;background:#f3f5f3;border-radius:8px;width:32px;height:32px;font-size:20px;color:#68736d}
form label{display:block;color:#4b5750;font-size:11px;font-weight:800;margin:14px 0}
input,textarea{
    width:100%;margin-top:7px;border:1px solid #dfe5e1;border-radius:8px;padding:11px 12px;
    outline:none;color:#27322c;background:#fff;font-size:12px
}
input:focus,textarea:focus{border-color:#8eb7a0;box-shadow:0 0 0 3px rgba(22,112,76,.08)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
@media(max-width:1050px){
    .dashboard-grid{grid-template-columns:repeat(2,1fr)}
    .quick-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
    .sidebar{position:fixed;left:-300px;z-index:90;transition:.25s}
    .sidebar.open{left:0}
    .mobile-toggle{display:block}
    .topbar{padding:0 18px}
    .topbar{gap:15px}
    .topbar>div:nth-child(2){flex:1}
    .top-actions .status{display:none}
    .content{padding:20px 16px 40px}
    .welcome{padding:21px;align-items:flex-start}
    .welcome h2{font-size:20px}
    .date-box{display:none}
    .dashboard-grid{grid-template-columns:1fr 1fr}
    footer{padding:16px}
}
@media(max-width:540px){
    .dashboard-grid,.quick-grid{grid-template-columns:1fr}
    .module-panel{padding:18px}
    .panel-heading{align-items:flex-start;flex-direction:column}
    .panel-heading .primary{width:100%}
}