/* styles.css - simple modern style */
:root {
  --accent: #2b7a78;
  --bg: #f5f7fb;
  --card: #ffffff;
  --muted: #7b8794;
}
body { margin:0; font-family: "Inter", Arial, sans-serif; background:var(--bg); color:#1a1a1a; }
.topbar { background:var(--card); display:flex; justify-content:space-between; align-items:center; padding:14px 20px; box-shadow:0 2px 6px rgba(20,20,20,0.05);}
.brand { font-weight:700; color:var(--accent); }
.hdr-right { display:flex; gap:10px; align-items:center; }
.btn { background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn.small { padding:6px 10px; font-size:0.9rem; }
.container { max-width:1100px; margin:20px auto; padding:10px; }
.cards-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom:18px; }
.card { background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(30,30,30,0.04); }
.card h4 { margin:0 0 6px 0; color:var(--muted); font-size:0.95rem; }
.big { font-size:1.8rem; font-weight:700; color:#111; margin:6px 0; }
.charts { display:grid; grid-template-columns: 1fr; gap:14px; margin-bottom:18px; }
.chart-card { background:var(--card); padding:10px; border-radius:10px; box-shadow:0 4px 12px rgba(20,20,20,0.04); }
.data-table { width:100%; border-collapse:collapse; background:var(--card); box-shadow:0 4px 10px rgba(20,20,20,0.03); }
.data-table th, .data-table td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }
.data-table th { background:#f0f4f7; }
.pagination { margin-top:12px; }
.pagination a { padding:6px 10px; margin-right:6px; background:#e7eef0; border-radius:6px; text-decoration:none; color:#123; }
.pagination a.active { background:var(--accent); color:#fff; }

.centered-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card { width:320px; padding:18px; text-align:left; background:var(--card); border-radius:10px; box-shadow:0 10px 30px rgba(30,30,30,0.06); }
.auth-card form { display:grid; gap:10px; }
.auth-card label { font-size:0.9rem; color:var(--muted); display:block; }
.auth-card input[type=text], .auth-card input[type=password] { padding:10px; border-radius:6px; border:1px solid #e3e7ea; width:100%; box-sizing:border-box; }
.alert { background:#ffefef; color:#8b1a1a; padding:8px; border-radius:6px; margin-bottom:8px; }