/* Styles for the map component */
#map-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid #444;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
    background: #333;
}

/* Customize Leaflet Dark Mode */
.leaflet-container {
    background: #333;
}

.leaflet-bar a {
    background-color: #444;
    color: #fff;
    border-bottom: 1px solid #666;
}

.leaflet-bar a:hover {
    background-color: #555;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    color: #fff !important;
}

.leaflet-control-layers {
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
}

.leaflet-control-layers-toggle {
    background-color: #444;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
}

/* Progress tracker custom styles */
.progress-steps .step-indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.progress-steps .step-details {
    flex: 1;
}

/* Status indicator colors */
.step-pending .step-indicator { background-color: #6c757d; }
.step-processing .step-indicator { background-color: #0dcaf0; }
.step-complete .step-indicator { background-color: #198754; }
.step-warning .step-indicator { background-color: #ffc107; }
.step-error .step-indicator { background-color: #dc3545; }
.step-skipped .step-indicator { background-color: #6c757d; opacity: 0.5; }

/* Map controls */
.map-controls {
    margin-top: 1rem;
    padding: 1rem;
    background: #222;
    border-radius: 0.25rem;
    border: 1px solid #444;
}

.map-instructions {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #aaa;
}

.map-actions {
    display: flex;
    gap: 0.5rem;
}

/* Leaflet Draw Plugin */
.leaflet-draw {
    margin-top: 10px !important;
}

.leaflet-draw-toolbar a {
    background-color: #444 !important;
    border: 1px solid #666 !important;
}

.leaflet-draw-toolbar a:hover {
    background-color: #555 !important;
}

/* Icon specific styling for better visibility in dark mode */
.leaflet-draw-toolbar a {
    position: relative;
}

.leaflet-draw-toolbar a:after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Add custom labels to the drawing buttons */
.leaflet-draw-toolbar .leaflet-draw-draw-polyline:after {
    content: 'Line';
    color: white;
    font-size: 10px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-polygon:after {
    content: 'Poly';
    color: white;
    font-size: 10px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-rectangle:after {
    content: 'Rect';
    color: white;
    font-size: 10px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-edit:after {
    content: 'Edit';
    color: white;
    font-size: 10px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove:after {
    content: 'Del';
    color: white;
    font-size: 10px;
}

.leaflet-draw-actions a {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
}

.leaflet-draw-actions a:hover {
    background-color: #444 !important;
}

.leaflet-draw-tooltip {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
}

/* Coordinates display */
.coordinates-display {
    font-family: monospace;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    background: #222;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #444;
}

/* Make map attribution more transparent and smaller */
.leaflet-control-attribution {
    background-color: rgba(0, 0, 0, 0.5) !important;
    font-size: 8px !important;
    color: rgba(180, 180, 180, 0.6) !important;
    padding: 2px 5px !important;
}

.leaflet-control-attribution a {
    color: rgba(180, 180, 180, 0.6) !important;
}