* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: #f4f7f6; color: #333; }

/* Login */
.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #2c3e50; }
.login-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 300px; text-align: center; }
.login-box h2 { margin-bottom: 20px; color: #2c3e50; }
.login-box input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { width: 100%; padding: 10px; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.login-box button:hover { background: #219150; }

/* Topbar */
.topbar { background: #2c3e50; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar button { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px; }
.btn-user { background: #3498db; color: white; }
.btn-logout { background: #e74c3c; color: white; }

/* Layout */
.main-content { display: flex; height: calc(100vh - 60px); }
.sidebar { width: 250px; background: white; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); overflow-y: auto; }
.sidebar label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 5px; }
.sidebar input, .sidebar select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.btn-reset { padding: 8px; background: #95a5a6; color: white; border: none; border-radius: 4px; cursor: pointer; }
.map-wrapper { flex: 1; }
#map { width: 100%; height: 100%; }

/* Modal */
.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 50px auto; padding: 20px; border-radius: 8px; width: 80%; max-width: 800px; max-height: 80vh; overflow-y: auto; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: black; }
.form-group input { width: 32%; padding: 8px; margin-right: 1%; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
.btn-add { padding: 8px 15px; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; }

/* Tabel User */
#user-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
#user-table th, #user-table td { border: 1px solid #ddd; padding: 10px; text-align: left; font-size: 14px; }
#user-table th { background-color: #f2f2f2; }
.btn-action { padding: 4px 8px; color: white; border: none; border-radius: 3px; cursor: pointer; margin-right: 5px; }
.btn-deactivate { background: #f39c12; }
.btn-activate { background: #3498db; }
.btn-delete { background: #e74c3c; }

/* Popup Peta */
.popup-img { width: 100%; max-width: 250px; border-radius: 4px; margin-bottom: 8px; }
.popup-info { font-size: 13px; line-height: 1.5; }
.popup-info strong { display: block; color: #2c3e50; }