* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; background: #f4f6f9; color: #222; font-size: 14px; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #1f3a5f; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; flex-wrap: wrap; gap: 10px; }
.brand { font-weight: 700; font-size: 17px; }
.topbar nav a { color: #dce6f5; margin-left: 18px; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.btn-logout { background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 4px; border: 0; color: #fff; cursor: pointer; font: inherit; }
.nav-logout-form { display: inline; margin-left: 12px; }

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 22px; margin-bottom: 16px; color: #1f3a5f; }
h2 { font-size: 17px; margin: 18px 0 10px; color: #1f3a5f; }
p.lead { color: #555; margin-bottom: 14px; }

.flash { padding: 10px 14px; border-radius: 5px; margin-bottom: 16px; font-weight: 500; }
.flash-sukses { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc4; }
.flash-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.flash-info { background: #e8f0fe; color: #1967d2; border: 1px solid #c3d9fc; }

.card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat .angka { font-size: 28px; font-weight: 700; color: #1a73e8; }
.stat .label { color: #666; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #eef1f4; vertical-align: top; }
th { background: #1f3a5f; color: #fff; font-weight: 600; font-size: 13px; }
tr:hover td { background: #f8fafd; }
td a.aksi { margin-right: 8px; font-size: 13px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge-aktif { background: #e6f4ea; color: #1e7e34; }
.badge-non { background: #fdecea; color: #b3261e; }
.badge-warning { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe082; }

form.cari { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select, textarea {
  padding: 8px 10px; border: 1px solid #cfd6de; border-radius: 5px; font-size: 14px; font-family: inherit; width: 100%;
}
textarea { min-height: 160px; font-family: Consolas, monospace; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; color: #444; }
.hint { font-size: 12px; color: #888; font-weight: 400; }

.btn { display: inline-block; padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn-primary { background: #1a73e8; color: #fff; }
.btn-success { background: #1e7e34; color: #fff; }
.btn-danger { background: #c62828; color: #fff; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-small { padding: 4px 10px; font-size: 12px; }

.pagination { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 5px 10px; border: 1px solid #cfd6de; border-radius: 4px; background: #fff; }
.pagination .current { background: #1a73e8; color: #fff; border-color: #1a73e8; }

.login-box { max-width: 380px; margin: 80px auto; }
.login-box h1 { text-align: center; }
.error-text { color: #b3261e; font-size: 13px; margin-bottom: 10px; }

.preview-import { max-height: 300px; overflow: auto; margin-top: 12px; }
.footer { text-align: center; color: #999; padding: 20px; font-size: 12px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .topbar nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .topbar nav a { margin-left: 0; font-size: 13px; }
  .nav-logout-form { margin-left: 0; }
}