/* main.css - place in public_html/assets/css/ */
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial; margin:0;background:#f7f8fb;color:#0f172a}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:white;box-shadow:0 1px 6px rgba(2,6,23,0.06);position:sticky;top:0;z-index:50}
.brand{font-weight:700;color:var(--theme);text-decoration:none}
.main-content{display:flex;gap:20px;padding:20px;min-height:calc(100vh - 120px)}
.sidebar{width:220px;background:white;border-radius:12px;padding:12px;height:calc(100vh - 120px);box-shadow:0 4px 18px rgba(16,24,40,0.03)}
.nav ul{list-style:none;padding:0;margin:0}
.nav a{display:block;padding:10px 8px;border-radius:8px;color:#0f172a;text-decoration:none;margin-bottom:6px}
.nav a:hover{background:linear-gradient(90deg,var(--theme)10%, rgba(79,70,229,0.06));color:var(--theme)}

.dashboard-container{flex:1}
.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px}
.card{background:white;border-radius:12px;padding:16px;box-shadow:0 6px 24px rgba(16,24,40,0.05)}
.card-title{font-size:13px;color:#6b7280}
.card-value{font-size:22px;font-weight:700;margin-top:8px}
.card-meta{font-size:12px;color:#9ca3af;margin-top:6px}

.filter-bar{background:white;padding:12px;border-radius:10px;margin-bottom:16px;display:flex;align-items:center}
.filter-form{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.filter-form input[type="text"], .filter-form select, .filter-form input[type="date"]{padding:8px;border:1px solid #e6e9ef;border-radius:8px}
.btn-primary{background:var(--theme);color:white;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid #e6e9ef;padding:8px 12px;border-radius:8px;text-decoration:none;color:#0f172a}

.table{width:100%;border-collapse:collapse;background:white;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.table th, .table td{padding:12px;text-align:left;border-bottom:1px solid #eef2f7}
.site-footer{display:flex;justify-content:space-between;padding:12px 20px;background:#ffffff;margin-top:18px;border-top:1px solid #f1f5f9}
@media (max-width:900px){
  .sidebar{display:none}
  .main-content{padding:12px}
}