/* Basic styles for quick usability */
body { font-family: Arial, sans-serif; background:#f6f7fb; margin:0; }
.container { max-width: 1100px; margin: 30px auto; background:#fff; padding:20px; border-radius:12px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
h1, h2, h3 { margin-top:0; }
.topbar { background:#222; color:#fff; display:flex; justify-content:space-between; padding:10px 20px; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.card { background:#fafafa; padding:16px; border-radius:10px; border:1px solid #eee; }
.stat { font-size: 28px; font-weight: bold; }
.actions .btn, button, .btn { display:inline-block; padding:10px 14px; border-radius:8px; border:none; background:#3b82f6; color:#fff; text-decoration:none; cursor:pointer; margin-right:8px; }
.actions { margin: 16px 0; }
label { display:block; margin-top:10px; margin-bottom:6px; }
input[type=text], input[type=password], input[type=month], textarea, select { width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; }
table { width:100%; border-collapse: collapse; margin-top:16px; }
table th, table td { border:1px solid #eee; padding:8px; text-align:left; }
.alert { padding:10px; border-radius:8px; margin-bottom:12px; }
.alert-danger { background:#fee2e2; color:#991b1b; }
.alert-success { background:#dcfce7; color:#166534; }
.inline-form { display:inline; }
.filters { display:flex; gap:12px; align-items:center; margin:10px 0; }
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
}