/* Reset */
body { margin: 0; font-family: sans-serif; overflow: hidden; }

/* Login */
.login-bg { background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-box { background: white; padding: 2rem; border-radius: 8px; width: 300px; text-align: center; }
.login-box input { display: block; width: 90%; margin: 10px auto; padding: 10px; }
.login-box button { width: 95%; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }

/* Dashboard */
.sidebar { position: absolute; top: 0; left: 0; width: 250px; height: 100vh; background: #2c3e50; color: white; z-index: 1000; overflow-y: auto; }
.logo { padding: 20px; font-weight: bold; font-size: 1.2rem; background: #1a252f; }
.user-info { padding: 10px 20px; font-size: 0.8rem; background: #34495e; }
#unitList { list-style: none; padding: 0; }
#unitList li { padding: 10px 20px; border-bottom: 1px solid #34495e; cursor: pointer; display: flex; justify-content: space-between; }
#unitList li:hover { background: #34495e; }
.btn-logout { display: block; margin: 20px; text-align: center; color: #e74c3c; text-decoration: none; border: 1px solid #e74c3c; padding: 5px; }

#map { margin-left: 250px; height: 100vh; width: calc(100% - 250px); }

/* Custom Map Icons */
.icon-np { font-size: 25px; color: blue; text-shadow: 2px 2px white; }
.icon-apf { font-size: 25px; color: gray; text-shadow: 2px 2px white; }
.icon-army { font-size: 25px; color: green; text-shadow: 2px 2px white; }

/* Mobile Tracker UI */
.mobile-ui { background: #111; color: white; text-align: center; display: flex; flex-direction: column; height: 100vh; }
.header { padding: 15px; background: #222; display: flex; justify-content: space-between; }
.big-status { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.big-status h1 { font-size: 6rem; margin: 0; color: #00ff00; }
.controls { padding: 20px; }
.btn-sos { width: 100%; height: 80px; background: #d9534f; color: white; font-size: 1.5rem; font-weight: bold; border: none; border-radius: 10px; }
.logs { height: 100px; background: #000; color: #0f0; font-family: monospace; font-size: 0.8rem; overflow: hidden; padding: 10px; text-align: left; }