* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, sans-serif; color: #222; background: #f5f5f5; }
.topbar { display: flex; align-items: center; gap: 1.5rem; background: #006740; color: #fff; padding: .6rem 1rem; }
.topbar .brand { font-weight: 700; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.logout-form button { background: none; border: 1px solid #fff; color: #fff; border-radius: 4px; padding: .2rem .6rem; cursor: pointer; }
main { max-width: 1300px; margin: 1.5rem auto; padding: 0 1rem; }
.flash { background: #e2f4e8; border: 1px solid #7bc496; padding: .6rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.error-box { background: #fbeaea; border: 1px solid #d9534f; padding: .6rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: .4rem .6rem; text-align: left; }
th { background: #eee; }
tr.inactive td { color: #999; background: #fafafa; }
.toolbar { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input[type=text] { padding: .35rem .5rem; }
.btn { display: inline-block; background: #006740; color: #fff; border: 0; border-radius: 4px; padding: .4rem .8rem; cursor: pointer; text-decoration: none; font-size: 13px; }
.btn.secondary { background: #666; }
.btn.danger { background: #c0392b; }
.btn.small { padding: .15rem .5rem; font-size: 12px; }
form.inline { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem 1.5rem; background: #fff; padding: 1rem; border: 1px solid #ddd; border-radius: 4px; }
.form-grid label { display: block; font-weight: 600; margin-bottom: .15rem; }
.form-grid input[type=text], .form-grid input[type=date], .form-grid select, .form-grid textarea { width: 100%; padding: .35rem .5rem; border: 1px solid #ccc; border-radius: 3px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { margin-top: 1rem; display: flex; gap: .75rem; }
.login-box { max-width: 360px; margin: 8vh auto; background: #fff; padding: 2rem; border: 1px solid #ddd; border-radius: 6px; }
.login-box input { width: 100%; padding: .5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; }
.pagination { display: flex; gap: .5rem; margin-top: 1rem; }
.pagination a, .pagination span { padding: .25rem .6rem; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; }
.pagination span.current { background: #006740; color: #fff; border-color: #006740; }
.report-grid { display: flex; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }
.report-grid .stat { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: .75rem 1.25rem; text-align: center; }
.report-grid .stat b { display: block; font-size: 1.6rem; }