* { margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI",Arial,sans-serif; }
body { background:#edf2f7; }

.app { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  width:240px; background:#0F4C81; color:#fff; padding:20px 0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand { padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,.15); }
.sidebar .brand h2 { font-size:20px; }
.sidebar .brand p { font-size:12px; opacity:.8; margin-top:4px; }
.sidebar-menu { list-style:none; margin-top:15px; }
.sidebar-menu li a {
  display:block; padding:12px 20px; color:#fff; text-decoration:none;
  font-size:14px; transition:.25s;
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active { background:#0a3a62; border-left:4px solid #fff; }

/* ===== MAIN ===== */
.main { flex:1; padding:25px 30px; }
.topbar { margin-bottom:25px; }
.topbar h1 { color:#0F4C81; font-size:26px; }
.topbar p { color:#64748b; font-size:13px; margin-top:4px; }

/* ===== CARD MENU ===== */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.menu-card {
  background:#fff; border-radius:12px; padding:30px 20px; text-align:center;
  text-decoration:none; color:#0F4C81; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.06); transition:.25s; cursor:pointer;
  display:block;
}
.menu-card:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.12); }

/* ===== TABEL ===== */
.table-section {
  display:none; background:#fff; border-radius:12px; padding:25px;
  box-shadow:0 6px 16px rgba(0,0,0,.06); margin-top:20px;
}
.table-section.active { display:block; }
.table-section h2 { color:#0F4C81; margin-bottom:15px; font-size:20px; }

.table-toolbar {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;
  flex-wrap:wrap; gap:10px;
}
.btn {
  padding:9px 18px; border:none; border-radius:8px; font-size:14px;
  cursor:pointer; text-decoration:none; display:inline-block; transition:.25s;
}
.btn-primary { background:#0F4C81; color:#fff; }
.btn-primary:hover { background:#0a3a62; }
.btn-warning { background:#f59e0b; color:#fff; }
.btn-warning:hover { background:#d97706; }
.btn-danger  { background:#dc2626; color:#fff; }
.btn-danger:hover  { background:#b91c1c; }
.btn-secondary { background:#e2e8f0; color:#1e293b; }
.btn-secondary:hover { background:#cbd5e1; }

table { width:100%; border-collapse:collapse; }
table th, table td {
  padding:11px 12px; text-align:left; border-bottom:1px solid #e2e8f0; font-size:14px;
}
table th { background:#f1f5f9; color:#0F4C81; font-weight:600; }
table tbody tr:hover { background:#f8fafc; }

.empty-row td { text-align:center; color:#94a3b8; padding:25px; font-style:italic; }

/* ===== FORM (untuk halaman input detail) ===== */
.form-container { max-width:1000px; margin:auto; }
.form-container h1 {
  text-align:center; color:#0F4C81; margin-bottom:30px; font-size:30px;
}
fieldset {
  background:#fff; border:none; border-radius:12px; padding:22px;
  margin-bottom:22px; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
legend {
  background:#0F4C81; color:#fff; padding:8px 16px; border-radius:8px;
  font-size:15px; font-weight:600;
}
fieldset label { display:block; margin:8px 0 5px; font-weight:600; color:#334155; font-size:14px; }
fieldset input,
fieldset select,
fieldset textarea {
  width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px;
  font-size:14px; transition:.25s;
}
fieldset input[type="file"] { padding:7px; background:#f8fafc; }
fieldset input:focus,
fieldset select:focus { outline:none; border-color:#0F4C81; box-shadow:0 0 6px rgba(15,76,129,.25); }
.form-actions { margin-top:15px; }