* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }

#map { position: absolute; top: 0; left: 320px; right: 0; bottom: 0; }

#sidebar {
    position: absolute; top: 0; left: 0; width: 320px; height: 100%;
    background: #0a1f0a; color: #eee; overflow-y: auto; z-index: 1000;
    display: flex; flex-direction: column;
}

.sidebar-header { padding: 16px; border-bottom: 1px solid #1b3a1b; }
.sidebar-header h2 { font-size: 18px; margin-bottom: 10px; color: #fff; }

.time-range { display: flex; gap: 6px; }
.range-btn {
    flex: 1; padding: 6px; border: 1px solid #444; background: transparent;
    color: #aaa; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.range-btn.active { background: #1b5e20; color: #fff; border-color: #4caf50; }

#device-list { flex: 1; overflow-y: auto; }

.device-card {
    padding: 12px 16px; border-bottom: 1px solid #1b3a1b; cursor: pointer;
    transition: background 0.15s;
}
.device-card:hover { background: #1b3a1b; }
.device-card.active { background: #1b5e20; border-left: 3px solid #4caf50; }

.device-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.device-imei { font-size: 11px; color: #888; font-family: monospace; }
.device-meta { font-size: 12px; color: #aaa; margin-top: 6px; display: flex; gap: 12px; }
.device-meta span { display: flex; align-items: center; gap: 3px; }

.status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
}
.status-dot.online { background: #4caf50; box-shadow: 0 0 4px #4caf50; }
.status-dot.moving { background: #2196f3; box-shadow: 0 0 4px #2196f3; }
.status-dot.offline { background: #666; }

#event-feed {
    max-height: 200px; border-top: 1px solid #1b3a1b; overflow-y: auto;
}
#event-feed h3 { padding: 10px 16px 6px; font-size: 13px; color: #888; }
#events { padding: 0 16px 10px; }

.event-item {
    font-size: 11px; color: #aaa; padding: 3px 0;
    border-bottom: 1px solid #1b3a1b; font-family: monospace;
}
.event-item .ev-time { color: #666; }
.event-item .ev-imei { color: #4caf50; }

#toast-container {
    position: fixed; top: 16px; right: 16px; z-index: 2000;
}
.toast {
    background: #0a1f0a; color: #fff; padding: 10px 16px; border-radius: 6px;
    margin-bottom: 8px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-left: 3px solid #4caf50; animation: fadeInOut 3s ease forwards;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(20px); }
    10% { opacity: 1; transform: translateX(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.leaflet-popup-content-wrapper {
    border-radius: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.popup-content { font-size: 13px; line-height: 1.6; }
.popup-content strong { font-size: 14px; }
.popup-content .meta { color: #666; font-size: 12px; }

#login-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #0a1f0a; display: flex; align-items: center; justify-content: center;
}
#login-overlay.hidden { display: none; }
.login-box {
    background: #122612; padding: 40px; border-radius: 12px; width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.login-box h1 { color: #4caf50; font-size: 22px; margin-bottom: 6px; }
.login-box p { color: #888; font-size: 13px; margin-bottom: 24px; }
.login-box input {
    width: 100%; padding: 10px 12px; margin-bottom: 14px; border: 1px solid #2a4a2a;
    background: #0a1f0a; color: #eee; border-radius: 6px; font-size: 14px;
}
.login-box input:focus { outline: none; border-color: #4caf50; }
.login-box button {
    width: 100%; padding: 10px; background: #2e7d32; color: #fff; border: none;
    border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 600;
}
.login-box button:hover { background: #388e3c; }
.login-error { color: #f44336; font-size: 12px; margin-bottom: 10px; display: none; }

@media (max-width: 768px) {
    #sidebar { width: 100%; height: 40%; top: auto; bottom: 0; }
    #map { left: 0; bottom: 40%; }
}