/* Page content to full width */

a.custom-link {
    color: #007BFF;       /* Bootstrap blue */
    font-weight: bold;    /* Bold text */
    text-decoration: none; /* Remove underline */
}

a.custom-link:hover {
    color: #0056b3;       /* Darker blue on hover */
}
.page-content { max-width: none; width: 100%; padding-left: 20px; padding-right: 20px; }

.map-container { display: flex; flex-wrap: wrap; gap: 20px; }
#map { height: 80vh; flex: 2; min-width: 300px; border-radius: 8px; }
#sensor-dashboard { flex: 1; min-width: 300px; height: 80vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; align-content: start; }

.sensor-card { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; }
.sensor-card h5 { margin-top: 0; margin-bottom: 10px; font-size: 1rem; }
.sensor-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.sensor-card li { padding: 4px 0; }
.sensor-card .timestamp { font-size: 0.75rem; color: #666; margin-top: 10px; }
.sensor-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Sensor name labels */
.leaflet-tooltip.sensor-label { background: transparent; border: none; box-shadow: none; color: #2c3e50; font-weight: 600; font-size: 12px; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }

/* Legend */
.leaflet-legend { background: white; padding: 10px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); }
.legend-item { display: flex; align-items: center; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 4px rgba(0,0,0,0.6); margin-right: 8px; }
.legend-line {
    height: 5px;
    width: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
/* Dark mode */
.dark-mode .sensor-card { background: #2a3b4a; border-color: #46627f; color: #e6edf3; }
.dark-mode .sensor-card .timestamp { color: #a0a6ac; }
.dark-mode .leaflet-legend { background: #2a3b4a; color: #e6edf3; border: 1px solid #46627f; }


/* Footer */
.site-footer { background: #f7f7f7; padding: 24px 0; margin-top: 24px; text-align: center; border-top: 1px solid #e0e0e0; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 32px; margin-bottom: 12px; }
.footer-logos img { max-height: 40px; width: auto; }
.site-footer p { margin: 0; color: #777; font-size: 14px; }

.dark-mode .site-footer { background: #34495e; border-top-color: #2c3e50; }
.dark-mode .site-footer p { color: #ddd; }