/* Modern Dashboard Styling */
body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #121212; color: #ffffff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1e1e1e; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Login Overlay */
#login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #121212; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.login-box { background: #1e1e1e; padding: 40px; border-radius: 12px; width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.login-box input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: 1px solid #333; background: #2d2d2d; color: white; box-sizing: border-box; outline: none; transition: border-color 0.2s;}
.login-box input:focus { border-color: #439F0C; }
.btn-primary { width: 100%; padding: 12px; margin-top: 20px; background: #439F0C; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 16px; transition: background 0.2s; }
.btn-primary:hover { background: #50b910; }
.btn-text { background: none; border: none; color: #888; cursor: pointer; font-size: 14px; transition: color 0.2s; padding: 0; }
.btn-text:hover { color: #fff; }

/* Dashboard Layout */
#dashboard { height: 100vh; display: flex; flex-direction: column; }
header { background: #1e1e1e; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 1000; }
.brand { font-size: 24px; font-weight: 700; color: #439F0C; display: flex; align-items: center; }
.header-controls { display: flex; align-items: center; gap: 20px; }
select { padding: 10px 15px; border-radius: 6px; background: #2d2d2d; color: white; border: 1px solid #444; outline: none; font-family: 'Inter', sans-serif; cursor: pointer; min-width: 250px;}

main { display: flex; flex: 1; overflow: hidden; }
#map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; z-index: 1;}

/* Status Card */
.status-card { position: absolute; top: 20px; left: 20px; background: rgba(30,30,30,0.85); padding: 25px; border-radius: 12px; z-index: 1000; box-shadow: 0 8px 32px rgba(0,0,0,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 280px; border: 1px solid rgba(255,255,255,0.05); }
.status-card h3 { margin: 0 0 20px 0; color: #439F0C; font-weight: 600; font-size: 18px; display: flex; align-items: center; }
.status-card h3::before { content: ""; display: inline-block; width: 8px; height: 8px; background: #439F0C; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px #439F0C; }
.status-item { margin-bottom: 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.status-label { color: #aaa; }
.status-value { font-weight: 500; text-align: right; }

/* Sidebar Controls */
.controls-sidebar { width: 320px; background: #1e1e1e; overflow-y: auto; padding: 25px; border-left: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 25px; z-index: 2; box-shadow: -5px 0 25px rgba(0,0,0,0.5);}
.control-group h4 { color: #888; margin: 0 0 15px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

.action-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 14px 16px; background: #2d2d2d; border: 1px solid rgba(255,255,255,0.05); color: #ddd; border-radius: 8px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; font-size: 14px; font-family: 'Inter', sans-serif;}
.action-btn:hover { background: #3d3d3d; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.action-btn:active { transform: translateY(0); }

.action-btn.primary { background: rgba(67, 159, 12, 0.1); border-color: rgba(67, 159, 12, 0.3); color: #50b910; }
.action-btn.primary:hover { background: rgba(67, 159, 12, 0.2); border-color: rgba(67, 159, 12, 0.5); color: #62d818; }
.action-btn.danger { background: rgba(211, 47, 47, 0.1); border-color: rgba(211, 47, 47, 0.3); color: #ff5252; }
.action-btn.danger:hover { background: rgba(211, 47, 47, 0.2); border-color: rgba(211, 47, 47, 0.5); color: #ff6b6b; }

.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Modals */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: #1e1e1e; padding: 30px; border-radius: 12px; width: 400px; max-width: 90%; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.modal h3 { margin-top: 0; color: #439F0C; font-weight: 600; }
.modal input { width: 100%; padding: 12px; margin: 10px 0; background: #2d2d2d; border: 1px solid #444; color: white; border-radius: 6px; box-sizing: border-box; outline: none; transition: border-color 0.2s;}
.modal input:focus { border-color: #439F0C; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 25px; }
.modal-buttons button { padding: 10px 20px; border-radius: 6px; cursor: pointer; border: none; font-weight: 600; transition: background 0.2s; font-family: 'Inter', sans-serif;}
.btn-cancel { background: #444; color: white; }
.btn-cancel:hover { background: #555; }
.btn-confirm { background: #439F0C; color: white; }
.btn-confirm:hover { background: #50b910; }

/* Map Tweaks for Dark Theme */
.leaflet-container { background: #121212 !important; }
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #1e1e1e; color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.leaflet-popup-content { margin: 15px; font-family: 'Inter', sans-serif; font-size: 14px;}
.leaflet-popup-close-button { color: #aaa !important; }

/* Pro badge */
.pro-badge { background: #f39c12; color: #000; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: auto; font-weight: 700; text-transform: uppercase; }