body { font-family: Inter, Roboto, Helvetica, Arial, sans-serif; background:#f7f9fc; color:#1d2939; margin: 0; padding: 0; }
.container{ max-width:1200px; margin:20px auto; padding:16px; background:#fff; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,0.06);} 

.controls { display:flex; flex-direction: column; gap:12px; margin-bottom:15px; }
.control-row { display: flex; gap: 8px; width: 100%; }
.machine-row label { flex: 1; }
.date-row label { flex: 1; min-width: 0; }

.controls label { font-size:14px; display: flex; flex-direction: column; gap: 5px; }
.controls input[type=date], .controls select { 
  padding:10px; 
  border:1px solid #d0d7de; 
  border-radius:6px; 
  width: 100%; 
  box-sizing: border-box; 
  font-size: 15px; 
  background: #fff;
  -webkit-appearance: none;
}
#btnFetch { padding: 12px; background: #2196F3; color: #fff; border: none; border-radius: 6px; cursor: pointer; width: 100%; font-weight: 600; font-size: 16px; box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3); }

#chart, #fuelChart { 
  margin-top:12px; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  border: 1px solid #f0f0f0; 
  border-radius: 8px; 
  background: #fff;
}
#chart svg, #fuelChart svg { min-width: 900px; display: block; }

.color-box { display:inline-block; width:18px; height:10px; margin-right:6px; vertical-align:middle; }
.color-box.work { background:#1f77b4; }
.color-box.idle { background:#ff7f0e; }
.legend-item { margin-right:12px; font-size: 13px; }
#log { margin-top:12px; font-size:13px; color:#666; }

/* Status Dashboard Styles */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0 15px 0;
  padding-left: 10px;
  border-left: 4px solid #2196F3;
  color: #1d2939;
}
.sub-section-title {
  font-size: 15px;
  font-weight: 500;
  margin: 20px 0 10px 0;
  color: #475467;
}
.status-dashboard {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
}
.status-row-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f9f9f9;
  padding-bottom: 15px;
}
.status-card { flex: 1; }
.status-card .card-val {
  font-size: 18px;
  font-weight: 600;
  color: #1d2939;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.status-card .card-label {
  font-size: 12px;
  color: #98a2b3;
  margin-top: 4px;
}
.status-info-box {
  line-height: 1.6;
  font-size: 14px;
}
.status-info-box strong {
  color: #98a2b3;
  width: 45px;
  display: inline-block;
  font-weight: normal;
}
.status-info-box .ts {
  color: #98a2b3;
  margin-left: 8px;
  display: inline-block;
}
.status-info-box .secondary {
  color: #98a2b3;
  font-size: 12px;
  margin-top: 5px;
}

#rtMap, #trajectoryMap {
  height: 300px; 
  margin-top: 15px; 
  border-radius: 8px; 
  border: 1px solid #eee; 
  background: #f8f9fa;
  position: relative; /* Ensure Leaflet positions correctly */
  z-index: 1;
}
#trajectoryMap { height: 500px; }

@media (min-width: 601px) {
  .controls { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .control-row { width: auto; }
  .controls label { flex-direction: row; align-items: center; white-space: nowrap; }
  .controls input[type=date] { width: 160px; }
  .controls select { width: 220px; }
  #btnFetch { width: auto; padding: 10px 24px; margin-bottom: 2px; }
}

@media (max-width: 600px) {
  .container { margin: 0; border-radius: 0; padding: 12px; width: 100%; box-sizing: border-box; }
  h1 { font-size: 20px; margin: 10px 0; }
  .status-row-top { flex-wrap: wrap; gap: 10px; }
  .status-card { flex: 0 0 45%; }
  .status-card:last-child { flex: 0 0 100%; }
  .status-card .card-val { font-size: 16px; }
  .section-title { font-size: 16px; margin: 20px 0 10px 0; }
}

/* svg styling */
axis line, axis path { stroke:#e7eef8; }

.leaflet-marker-icon, .leaflet-marker-shadow {
  max-width: none !important;
}