/* === LAYOUT === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0a0a1a; color: #e0e0e0; display: flex; height: 100vh; overflow: hidden; }
#sidebar { width: 520px; min-width: 520px; background: #16213e; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #0f3460; }
#sidebar h1 { padding: 12px 15px 8px; color: #e94560; font-size: 1.15em; border-bottom: 1px solid #0f3460; }
#map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }
.leaflet-routing-container { display: none !important; }

/* === TABS === */
.sidebar-tabs { display: flex; border-bottom: 1px solid #0f3460; }
.sidebar-tab { flex: 1; padding: 8px 4px; border: none; background: none; color: #888; cursor: pointer; font-size: 0.78em; font-weight: 600; transition: all 0.2s; border-bottom: 2px solid transparent; }
.sidebar-tab:hover { color: #e0e0e0; }
.sidebar-tab.active { color: #e94560; border-bottom-color: #e94560; }
.sidebar-panel { display: none; overflow-y: auto; flex: 1; }
.sidebar-panel.active { display: block; }
.section { padding: 10px 15px; border-bottom: 1px solid #0f3460; }
.section h3 { color: #e94560; font-size: 0.88em; margin-bottom: 6px; }

/* === BUTTONS === */
.btn { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.78em; font-weight: 600; transition: all 0.2s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn-primary { background: #2980b9; color: #fff; }
.btn-success { background: #27ae60; color: #fff; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-warning { background: #f39c12; color: #fff; }
.btn-teal { background: #1abc9c; color: #fff; }
.btn-purple { background: #8e44ad; color: #fff; }
.btn-secondary { background: #555; color: #fff; }
.btn-reopt { background: linear-gradient(135deg, #e94560, #f39c12); color: #fff; }
.btn-group { display: flex; gap: 5px; flex-wrap: wrap; }

/* === FORMS === */
.upload-area { border: 2px dashed #533483; border-radius: 10px; padding: 15px; text-align: center; cursor: pointer; transition: border-color 0.3s; margin-bottom: 8px; }
.upload-area:hover { border-color: #e94560; }
.upload-area .icon { font-size: 1.8em; color: #533483; }
.upload-area strong { display: block; font-size: 0.83em; margin-top: 4px; }
.upload-area p { font-size: 0.72em; color: #888; }
.upload-area input { display: none; }
.format-info { font-size: 0.72em; color: #888; padding: 4px 8px; background: #1a1a2e; border-radius: 4px; margin-bottom: 6px; }
.format-info code { color: #f39c12; }
.manual-add { display: flex; gap: 6px; margin-top: 6px; }
.manual-add input { flex: 1; padding: 7px 10px; border: 1px solid #0f3460; border-radius: 6px; background: #1a1a2e; color: #e0e0e0; font-size: 0.83em; }
.manual-add input:focus { outline: none; border-color: #533483; }
.checkbox-group { display: flex; align-items: center; gap: 6px; font-size: 0.78em; color: #aaa; margin-top: 6px; }
.checkbox-group input { accent-color: #e94560; }
.stats-bar { display: flex; gap: 15px; margin-top: 8px; padding: 6px 10px; background: #1a1a2e; border-radius: 6px; font-size: 0.78em; }
.stat-value { color: #27ae60; font-weight: bold; }
select { padding: 5px 8px; border: 1px solid #0f3460; border-radius: 6px; background: #1a1a2e; color: #e0e0e0; font-size: 0.83em; }
select:focus { outline: none; border-color: #533483; }
.save-name-input { width: 100%; padding: 8px 12px; border: 1px solid #0f3460; border-radius: 6px; background: #1a1a2e; color: #e0e0e0; font-size: 0.85em; margin-bottom: 8px; box-sizing: border-box; }
.save-name-input:focus { outline: none; border-color: #533483; }

/* === HOME ADDRESS === */
.home-section { background: linear-gradient(135deg, #1a3a2e, #16213e); border: 2px solid #FFD700; border-radius: 10px; padding: 12px; }
.home-section h3 { color: #FFD700 !important; }
.home-input { display: flex; gap: 8px; align-items: center; }
.home-input input { flex: 1; padding: 8px 12px; border: 2px solid #FFD700; border-radius: 8px; background: #1a1a2e; color: #e0e0e0; font-size: 0.85em; }
.home-input input:focus { outline: none; border-color: #fff; box-shadow: 0 0 10px rgba(255,215,0,0.3); }
.home-status { margin-top: 6px; font-size: 0.78em; padding: 4px 8px; border-radius: 4px; display: none; }
.home-status.ok { display: block; background: rgba(39,174,96,0.2); color: #27ae60; border: 1px solid #27ae60; }
.home-status.err { display: block; background: rgba(192,57,43,0.2); color: #e74c3c; border: 1px solid #c0392b; }
.home-status.loading { display: block; background: rgba(243,156,18,0.2); color: #f39c12; border: 1px solid #f39c12; }
.home-indicator { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,215,0,0.15); border: 1px solid #FFD700; border-radius: 6px; padding: 3px 8px; font-size: 0.75em; color: #FFD700; margin-bottom: 6px; }
.home-indicator.missing { border-color: #c0392b; color: #e74c3c; background: rgba(192,57,43,0.15); }

/* === ADDRESS ITEMS === */
.address-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #0f3460; font-size: 0.78em; cursor: grab; transition: background 0.15s; border-radius: 4px; margin-bottom: 2px; }
.address-item:hover { background: #1e2a4a; }
.address-item.dragging { opacity: 0.4; }
.address-item.drag-over-item { background: #1a3a2e; border: 1px dashed #27ae60; }
.address-item.error { background: rgba(192,57,43,0.1); }
.address-item.geocoding { background: rgba(243,156,18,0.1); }
.drag-handle { color: #555; cursor: grab; user-select: none; }
.address-number { background: #e94560; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72em; font-weight: bold; flex-shrink: 0; }
.address-number.routed { background: #27ae60; }
.address-text { flex: 1; min-width: 0; }
.address-text .street { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.address-text .city { font-size: 0.85em; color: #888; }
.address-remove { background: none; border: none; color: #555; cursor: pointer; font-size: 0.9em; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.address-remove:hover { color: #e94560; background: #2c1a1a; }
.address-edit { background: none; border: none; color: #f39c12; cursor: pointer; font-size: 0.85em; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
.address-edit:hover { background: rgba(243,156,18,0.2); }
.addr-name { color: #f39c12; font-size: 0.85em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === ROUTE ITEMS === */
.route-item { background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 7px 10px; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; cursor: grab; transition: all 0.2s; font-size: 0.78em; }
.route-item:hover { border-color: #533483; background: #1e2a4a; }
.route-item.dragging { opacity: 0.5; border-color: #e94560; }
.route-item.drag-over-item { border-color: #27ae60; background: #1a3a2e; }
.route-item.home-item { border-color: #FFD700; background: rgba(255,215,0,0.08); cursor: default; }
.route-item.pinned-item { border-left: 3px solid #FFD700; background: rgba(255,215,0,0.05); }
.route-pin-btn { background: none; border: none; cursor: pointer; font-size: 0.85em; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; transition: all 0.2s; }
.route-pin-btn:hover { background: rgba(255,215,0,0.2); }
.route-info { display: flex; flex-wrap: wrap; gap: 10px; }
.route-stat { font-size: 0.83em; }
.route-stat span:last-child { color: #27ae60; font-weight: bold; }

/* === DAY BLOCKS === */
.day-block { background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.day-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.day-header h4 { color: #e94560; font-size: 0.88em; flex: 1; display: flex; align-items: center; gap: 6px; }
.day-reorder-btn { background: none; border: 1px solid #0f3460; color: #888; cursor: pointer; font-size: 0.75em; padding: 2px 6px; border-radius: 4px; transition: all 0.2s; }
.day-reorder-btn:hover { color: #e94560; border-color: #e94560; background: rgba(233,69,96,0.1); }
.day-reorder-btn:disabled { opacity: 0.3; cursor: default; }
.day-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.day-return-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.76em; color: #aaa; margin: 4px 0; padding: 3px 6px; border-radius: 4px; background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.2); }
.day-return-toggle input { accent-color: #FFD700; }
.day-return-toggle label { cursor: pointer; }
.day-drop-zone { min-height: 40px; border: 2px dashed transparent; border-radius: 6px; transition: all 0.2s; padding: 2px; }
.day-drop-zone.drag-hover { border-color: #27ae60; background: rgba(39,174,96,0.1); }
.day-address-list { font-size: 0.76em; min-height: 30px; }
.day-address-item { padding: 5px 8px; border: 1px solid transparent; border-bottom: 1px solid #0f3460; display: flex; align-items: center; gap: 6px; cursor: grab; transition: all 0.15s; border-radius: 4px; margin-bottom: 2px; }
.day-address-item:hover { background: #1e2a4a; }
.day-address-item.dragging { opacity: 0.4; }
.day-address-item.drag-over { background: #1a3a2e; border: 1px dashed #27ae60; }
.day-address-item.pinned { border-left: 3px solid #FFD700; background: rgba(255,215,0,0.05); }
.day-addr-num { color: white; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7em; font-weight: bold; flex-shrink: 0; }
.day-addr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-addr-remove { background: none; border: none; color: #555; cursor: pointer; font-size: 0.9em; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.day-addr-remove:hover { color: #e94560; background: #2c1a1a; }
.day-addr-pin { background: none; border: none; cursor: pointer; font-size: 0.85em; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; transition: all 0.2s; }
.day-addr-pin:hover { background: rgba(255,215,0,0.2); }
.day-actions { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.day-actions .btn { font-size: 0.72em; padding: 4px 8px; }
.day-stats { font-size: 0.76em; color: #aaa; margin-top: 6px; padding: 4px 8px; background: #0f3460; border-radius: 4px; }
.day-stats span { color: #27ae60; font-weight: bold; }
.unassigned-pool { background: #2c1a1a; border: 1px dashed #e94560; border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.unassigned-pool h4 { color: #f39c12; font-size: 0.85em; margin-bottom: 6px; }
.dirty-badge { display: inline-block; background: #e94560; color: white; font-size: 0.6em; padding: 1px 5px; border-radius: 8px; margin-left: 6px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.global-dirty-banner { background: linear-gradient(135deg, rgba(233,69,96,0.2), rgba(243,156,18,0.2)); border: 1px solid #e94560; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 0.78em; display: flex; align-items: center; gap: 8px; }
.global-dirty-banner .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #e94560; animation: pulse 1s infinite; flex-shrink: 0; }

/* === MAP EXPORT === */
.map-export-buttons { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; }
.map-export-btn { padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.8em; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all 0.3s; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.map-export-btn.png-btn { background: #2980b9; color: white; }
.map-export-btn.png-btn:hover { background: #3498db; transform: translateY(-2px); }
.map-export-btn.pdf-btn { background: #c0392b; color: white; }
.map-export-btn.pdf-btn:hover { background: #e74c3c; transform: translateY(-2px); }

/* === MARKERS === */
.custom-marker { background: none !important; border: none !important; }
.marker-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); border: 2px solid white; }
.marker-pin span { transform: rotate(45deg); color: white; font-weight: bold; font-size: 11px; }
.marker-pin.home-marker { background: #FFD700; width: 36px; height: 36px; }
.marker-pin.home-marker span { color: #000; font-size: 14px; }
.popup-content h4 { color: #e94560; margin-bottom: 4px; }
.popup-content p { font-size: 0.85em; margin: 2px 0; }

/* === MODALS === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #16213e; border: 1px solid #0f3460; border-radius: 12px; padding: 20px; width: 90%; max-width: 550px; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.modal-content h3 { color: #e94560; margin-bottom: 12px; font-size: 1.05em; }
.modal-close { float: right; background: none; border: none; color: #888; font-size: 1.4em; cursor: pointer; padding: 0 6px; }
.modal-close:hover { color: #e94560; }
.saved-route-item { background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: all 0.2s; }
.saved-route-item:hover { border-color: #533483; }
.saved-route-info { flex: 1; min-width: 0; }
.saved-route-name { color: #e0e0e0; font-weight: 600; font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-route-meta { color: #888; font-size: 0.72em; margin-top: 3px; }
.saved-route-actions { display: flex; gap: 4px; flex-shrink: 0; }
.saved-route-actions .btn { font-size: 0.72em; padding: 4px 10px; }

/* === NOTIFICATIONS === */
.notification { position: fixed; top: 20px; right: 20px; padding: 10px 18px; border-radius: 8px; font-size: 0.85em; font-weight: 600; z-index: 10000; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.notification.success { background: #27ae60; color: white; }
.notification.error { background: #c0392b; color: white; }
.notification.info { background: #2980b9; color: white; }

/* === LOADING === */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
#loading-overlay.active { display: flex; }
.spinner { width: 40px; height: 40px; border: 4px solid #0f3460; border-top-color: #e94560; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { color: #e0e0e0; font-size: 0.85em; }

/* === HELP === */
.how-to { background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px; padding: 12px; font-size: 0.78em; line-height: 1.55; color: #bbb; }
.how-to h4 { color: #e94560; margin-bottom: 6px; font-size: 1.05em; }
.how-to ol, .how-to ul { padding-left: 16px; }
.how-to li { margin-bottom: 5px; }
.how-to .hl { color: #f39c12; font-weight: bold; }
.how-to .key { color: #e94560; font-weight: bold; }