/**
 * KM Waypoint Planner - style frontendu.
 * Przeniesione z Waypoint Planner Pro v3.1 + poprawki pod WordPress:
 *   - .wpp-app-container: height 100vh -> 100% (wysokosc steruje shortcode)
 *   - .wpp-preview-panel.wpp-fullscreen: z-index 9999 -> 999999 (sticky headery motywow)
 *   - .wpp-modal-overlay: z-index 2000 -> 999998
 */

/* ===== WRAPPER OSADZENIA (specyficzne dla WP) ===== */
.km-wpp-wrapper { position: relative; width: 100%; min-height: 600px; overflow: hidden; background: #0a0e17; border-radius: 8px; }
.km-wpp-boot { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 600px; color: #94a3b8; background: #0a0e17; font-family: system-ui, -apple-system, sans-serif; font-size: 14px; }
.km-wpp-savebar { display: flex !important; align-items: center !important; gap: 0.5rem !important; }
.km-wpp-savebar__status { font-size: 0.6875rem !important; color: #64748b !important; min-width: 90px !important; }
.km-wpp-savebar__status.is-ok { color: #22c55e !important; }
.km-wpp-savebar__status.is-error { color: #ef4444 !important; }
.km-wpp-wrapper button { text-transform: none; letter-spacing: normal; min-height: auto; line-height: normal; }
.km-wpp-wrapper input, .km-wpp-wrapper select { max-width: none; min-height: auto; }
.km-wpp-wrapper .leaflet-container a { box-shadow: none; text-decoration: none; }
.km-wpp-toast { position: absolute !important; bottom: 1rem !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 3000 !important; background: #1c2536 !important; border: 1px solid #2d3a4f !important; border-left: 3px solid #f97316 !important; border-radius: 6px !important; padding: 0.6rem 1rem !important; color: #f1f5f9 !important; font-size: 0.75rem !important; max-width: 80% !important; white-space: pre-line !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; line-height: 1.4 !important; }
.km-wpp-toast.is-error { border-left-color: #ef4444 !important; }
.km-wpp-toast.is-ok { border-left-color: #22c55e !important; }

/* ===== ORYGINALNE STYLE PLANERA ===== */
.wpp-app-container *, .wpp-app-container *::before, .wpp-app-container *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
.wpp-app-container {
    --wpp-bg-primary: #0a0e17; --wpp-bg-secondary: #131a27; --wpp-bg-tertiary: #1c2536; --wpp-bg-elevated: #242f42;
    --wpp-border-color: #2d3a4f; --wpp-border-light: #3d4f6a;
    --wpp-text-primary: #f1f5f9; --wpp-text-secondary: #94a3b8; --wpp-text-muted: #64748b;
    --wpp-accent-orange: #f97316; --wpp-accent-orange-glow: rgba(249, 115, 22, 0.3);
    --wpp-accent-blue: #3b82f6; --wpp-accent-cyan: #06b6d4; --wpp-accent-green: #22c55e;
    --wpp-accent-red: #ef4444; --wpp-accent-purple: #a855f7; --wpp-accent-yellow: #eab308;
    --wpp-left-panel-width: 380px; --wpp-right-panel-width: 340px; --wpp-header-height: 56px;
    font-family: 'Segoe UI', system-ui, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important;
    color: var(--wpp-text-primary) !important; background: var(--wpp-bg-primary) !important;
    position: relative !important; width: 100% !important; height: 100% !important; min-height: 600px !important;
    overflow: hidden !important; display: flex !important; flex-direction: column !important;
}
.wpp-app-container ::-webkit-scrollbar { width: 6px !important; } .wpp-app-container ::-webkit-scrollbar-track { background: var(--wpp-bg-secondary) !important; } .wpp-app-container ::-webkit-scrollbar-thumb { background: var(--wpp-border-color) !important; border-radius: 3px !important; }
.wpp-header { background: linear-gradient(180deg, var(--wpp-bg-secondary) 0%, var(--wpp-bg-primary) 100%) !important; border-bottom: 1px solid var(--wpp-border-color) !important; padding: 0 0.75rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; min-height: var(--wpp-header-height) !important; height: auto !important; flex-shrink: 0 !important; z-index: 100 !important; flex-wrap: wrap !important; }
/* Naglowek nie moze przycinac przyciskow (m.in. Eksport) na waskich i bardzo szerokich ekranach. */
.wpp-header-actions { flex-wrap: wrap !important; justify-content: flex-end !important; }
.wpp-header-center { flex-wrap: wrap !important; min-width: 0 !important; }
.wpp-header-center .wpp-input { min-width: 120px !important; max-width: 180px !important; }
@media (max-width: 1200px) {
    .wpp-btn-panel { display: none !important; }
    .wpp-header-center .wpp-input { width: 120px !important; }
}
.wpp-logo { display: flex !important; align-items: center !important; gap: 0.625rem !important; }
.wpp-logo-icon { width: 32px !important; height: 32px !important; background: linear-gradient(135deg, var(--wpp-accent-orange) 0%, #ea580c 100%) !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px var(--wpp-accent-orange-glow) !important; }
.wpp-logo-icon svg { width: 18px !important; height: 18px !important; color: white !important; }
.wpp-logo-text { font-size: 1rem !important; font-weight: 700 !important; } .wpp-logo-text span:first-child { color: var(--wpp-accent-orange) !important; }
.wpp-badge { background: var(--wpp-accent-purple) !important; color: white !important; font-size: 0.5rem !important; font-weight: 700 !important; padding: 0.1rem 0.3rem !important; border-radius: 3px !important; text-transform: uppercase !important; margin-left: 0.375rem !important; }
.wpp-header-center { display: flex !important; align-items: center !important; gap: 0.5rem !important; }
.wpp-input { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 5px !important; padding: 0.4rem 0.75rem !important; color: var(--wpp-text-primary) !important; font-size: 0.8125rem !important; font-family: inherit !important; outline: none !important; }
.wpp-input::placeholder { color: #a1a1aa !important; opacity: 1 !important; }
.wpp-input:focus { border-color: var(--wpp-accent-orange) !important; box-shadow: 0 0 0 2px var(--wpp-accent-orange-glow) !important; }
.wpp-select { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 5px !important; padding: 0.4rem 0.75rem !important; color: var(--wpp-text-primary) !important; font-size: 0.8125rem !important; cursor: pointer !important; outline: none !important; }
.wpp-select option { background: var(--wpp-bg-secondary) !important; color: var(--wpp-text-primary) !important; padding: 0.5rem !important; }
.wpp-header-actions { display: flex !important; align-items: center !important; gap: 0.375rem !important; }
.wpp-btn { border: none !important; border-radius: 6px !important; padding: 0.4rem 0.75rem !important; font-size: 0.75rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; transition: all 0.2s !important; white-space: nowrap !important; }
.wpp-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }
.wpp-btn-secondary { background: var(--wpp-bg-tertiary) !important; color: var(--wpp-text-secondary) !important; border: 1px solid var(--wpp-border-color) !important; }
.wpp-btn-secondary:hover { background: var(--wpp-bg-elevated) !important; color: var(--wpp-text-primary) !important; }
.wpp-btn-primary { background: linear-gradient(135deg, var(--wpp-accent-orange) 0%, #ea580c 100%) !important; color: white !important; box-shadow: 0 2px 6px var(--wpp-accent-orange-glow) !important; }
.wpp-btn-primary:hover { transform: translateY(-1px) !important; }
.wpp-btn-icon { background: transparent !important; border: none !important; color: var(--wpp-text-muted) !important; padding: 0.3rem !important; border-radius: 4px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.wpp-btn-icon:hover { background: var(--wpp-bg-tertiary) !important; color: var(--wpp-text-primary) !important; }
.wpp-btn-panel { padding: 0.35rem 0.75rem !important; font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-radius: 4px !important; white-space: nowrap !important; }
.wpp-btn-green { background: #22c55e !important; color: white !important; border: none !important; }
.wpp-btn-green:hover { background: #16a34a !important; }
.wpp-btn-red { background: #ef4444 !important; color: white !important; border: none !important; }
.wpp-btn-red:hover { background: #dc2626 !important; }
.wpp-btn-icon.wpp-active { background: var(--wpp-accent-orange) !important; color: white !important; }
.wpp-btn-icon.wpp-danger:hover { color: var(--wpp-accent-red) !important; }
.wpp-main { display: flex !important; flex: 1 !important; overflow: hidden !important; position: relative !important; }
.wpp-panel-left { width: var(--wpp-left-panel-width) !important; background: var(--wpp-bg-secondary) !important; border-right: 1px solid var(--wpp-border-color) !important; display: flex !important; flex-direction: column !important; position: relative !important; z-index: 10 !important; }
.wpp-panel-left.wpp-collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden !important; border-right: none !important; }
.wpp-panel-right { width: var(--wpp-right-panel-width) !important; background: var(--wpp-bg-secondary) !important; border-left: 1px solid var(--wpp-border-color) !important; display: flex !important; flex-direction: column !important; position: relative !important; z-index: 10 !important; }
.wpp-panel-right.wpp-collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden !important; border-left: none !important; }
.wpp-collapse-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 20px !important; height: 48px !important; background: var(--wpp-bg-elevated) !important; border: 1px solid var(--wpp-border-color) !important; color: var(--wpp-text-muted) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 25 !important; }
.wpp-collapse-btn:hover { background: var(--wpp-accent-orange) !important; color: white !important; }
.wpp-collapse-btn-left { right: -20px !important; border-radius: 0 6px 6px 0 !important; border-left: none !important; }
.wpp-collapse-btn-right { left: -20px !important; border-radius: 6px 0 0 6px !important; border-right: none !important; }
.wpp-collapse-btn svg { width: 12px !important; height: 12px !important; }
.wpp-expand-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 24px !important; height: 48px !important; background: var(--wpp-bg-elevated) !important; border: 1px solid var(--wpp-border-color) !important; color: var(--wpp-text-muted) !important; cursor: pointer !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 30 !important; }
.wpp-expand-btn:hover { background: var(--wpp-accent-orange) !important; color: white !important; }
.wpp-expand-btn-left { left: 0 !important; border-radius: 0 6px 6px 0 !important; } .wpp-expand-btn-right { right: 0 !important; border-radius: 6px 0 0 6px !important; }
.wpp-map-container { flex: 1 !important; position: relative !important; background: var(--wpp-bg-primary) !important; overflow: hidden !important; }
.wpp-map { width: 100% !important; height: 100% !important; background: #1a1a2e !important; }
.wpp-app-container .leaflet-container { background: #1a1a2e !important; font-family: inherit !important; }
.wpp-app-container .leaflet-control-zoom { border: none !important; } .wpp-app-container .leaflet-control-zoom a { background: var(--wpp-bg-secondary) !important; color: var(--wpp-text-primary) !important; border: 1px solid var(--wpp-border-color) !important; width: 32px !important; height: 32px !important; line-height: 32px !important; }
.wpp-tabs { display: flex !important; border-bottom: 1px solid var(--wpp-border-color) !important; background: var(--wpp-bg-tertiary) !important; flex-shrink: 0 !important; }
/* Lewy panel ma 6 zakladek - w jednym rzedzie etykiety lamalyby sie na dwie
   linie i nachodzily na siebie. Siatka 3x2 daje ~97px na tekst zamiast ~41px. */
.wpp-panel-left .wpp-tabs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--wpp-border-color) !important; }
.wpp-panel-left .wpp-tab { background: var(--wpp-bg-tertiary) !important; padding: 0.45rem 0.25rem !important; font-size: 0.625rem !important; min-height: 50px !important; justify-content: center !important; }
.wpp-panel-left .wpp-tab.wpp-active { margin-bottom: 0 !important; border-bottom: none !important; box-shadow: inset 0 -2px 0 var(--wpp-accent-orange) !important; }
.wpp-tab { flex: 1 !important; padding: 0.625rem 0.5rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; background: transparent !important; border: none !important; color: var(--wpp-text-muted) !important; font-size: 0.6875rem !important; font-weight: 600 !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.2rem !important; text-transform: uppercase !important; }
.wpp-tab:hover { color: var(--wpp-text-secondary) !important; background: rgba(255,255,255,0.03) !important; }
.wpp-tab.wpp-active { color: var(--wpp-accent-orange) !important; background: var(--wpp-bg-secondary) !important; border-bottom: 2px solid var(--wpp-accent-orange) !important; margin-bottom: -1px !important; }
.wpp-tab svg { width: 16px !important; height: 16px !important; }
.wpp-tab-content { display: none !important; flex: 1 !important; flex-direction: column !important; overflow: hidden !important; }
.wpp-tab-content.wpp-active { display: flex !important; }
.wpp-panel-header { padding: 0.875rem !important; border-bottom: 1px solid var(--wpp-border-color) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-shrink: 0 !important; }
.wpp-panel-title { font-size: 0.75rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; gap: 0.4rem !important; }
.wpp-count-badge { background: var(--wpp-accent-orange) !important; color: white !important; font-size: 0.625rem !important; padding: 0.1rem 0.4rem !important; border-radius: 8px !important; font-weight: 700 !important; }
.wpp-panel-actions { display: flex !important; gap: 0.2rem !important; }
.wpp-panel-scroll { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0.875rem !important; }
.wpp-waypoint-list { display: flex !important; flex-direction: column !important; gap: 0.3rem !important; }
.wpp-waypoint-item { background: var(--wpp-bg-tertiary) !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 0.625rem !important; cursor: pointer !important; }
.wpp-waypoint-item:hover { background: var(--wpp-bg-elevated) !important; border-color: var(--wpp-border-color) !important; }
.wpp-waypoint-item.wpp-selected { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.4) !important; }
.wpp-waypoint-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.wpp-waypoint-info { display: flex !important; align-items: center !important; gap: 0.4rem !important; }
.wpp-waypoint-num { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--wpp-accent-blue) 0%, #2563eb 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.625rem !important; font-weight: 700 !important; color: white !important; }
.wpp-waypoint-item.wpp-selected .wpp-waypoint-num { background: linear-gradient(135deg, var(--wpp-accent-orange) 0%, #ea580c 100%) !important; }
.wpp-waypoint-name { font-size: 0.75rem !important; font-weight: 500 !important; color: var(--wpp-text-primary) !important; }
.wpp-waypoint-coords { font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; font-family: 'Consolas', monospace !important; }
.wpp-waypoint-params { display: flex !important; gap: 0.3rem !important; margin-top: 0.4rem !important; flex-wrap: wrap !important; }
.wpp-param-badge { font-size: 0.5625rem !important; padding: 0.1rem 0.3rem !important; border-radius: 3px !important; background: var(--wpp-bg-elevated) !important; color: var(--wpp-text-muted) !important; }
.wpp-param-badge.wpp-action { background: rgba(34, 197, 94, 0.2) !important; color: var(--wpp-accent-green) !important; }
.wpp-empty-state { text-align: center !important; padding: 2rem 1rem !important; color: var(--wpp-text-muted) !important; }
.wpp-empty-state svg { width: 40px !important; height: 40px !important; margin-bottom: 0.5rem !important; opacity: 0.4 !important; }
.wpp-empty-state p { font-size: 0.75rem !important; }
.wpp-map-toolbar { position: absolute !important; top: 0.75rem !important; left: 0.75rem !important; z-index: 1000 !important; display: flex !important; flex-direction: column !important; gap: 0.4rem !important; }
.wpp-toolbar-group { background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.2rem !important; display: flex !important; flex-direction: column !important; gap: 0.1rem !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.wpp-toolbar-btn { min-width: 36px !important; height: 30px !important; padding: 0.2rem 0.4rem !important; background: transparent !important; border: none !important; border-radius: 4px !important; color: var(--wpp-text-secondary) !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 0.25rem !important; }
.wpp-toolbar-btn:hover { background: var(--wpp-bg-tertiary) !important; color: var(--wpp-text-primary) !important; }
.wpp-toolbar-btn.wpp-active { background: var(--wpp-accent-orange) !important; color: white !important; }
.wpp-toolbar-btn svg { width: 16px !important; height: 16px !important; }
.wpp-toolbar-label { font-size: 0.625rem !important; white-space: nowrap !important; }
.wpp-map-search { position: absolute !important; top: 0.75rem !important; left: 8.5rem !important; transform: none !important; z-index: 1000 !important; width: 280px !important; }
.wpp-search-wrapper { position: relative !important; }
.wpp-search-icon { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; color: var(--wpp-text-muted) !important; pointer-events: none !important; }
.wpp-search-input { width: 100% !important; padding: 0.6rem 2rem 0.6rem 2.25rem !important; background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 8px !important; color: var(--wpp-text-primary) !important; font-size: 0.8125rem !important; outline: none !important; }
.wpp-search-input:focus { border-color: var(--wpp-accent-orange) !important; }
.wpp-search-input::placeholder { color: #a1a1aa !important; opacity: 1 !important; }
.wpp-search-results { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; margin-top: 4px !important; background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 8px !important; max-height: 240px !important; overflow-y: auto !important; display: none !important; }
.wpp-search-results.wpp-active { display: block !important; }
.wpp-search-result { padding: 0.6rem 0.75rem !important; cursor: pointer !important; border-bottom: 1px solid var(--wpp-border-color) !important; }
.wpp-search-result:hover { background: var(--wpp-bg-tertiary) !important; }
.wpp-search-result-name { font-weight: 600 !important; font-size: 0.8125rem !important; color: var(--wpp-text-primary) !important; }
.wpp-search-result-address { font-size: 0.6875rem !important; color: var(--wpp-text-muted) !important; }
.wpp-map-info { position: absolute !important; bottom: 0.75rem !important; left: 0.75rem !important; z-index: 1000 !important; background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.5rem 0.75rem !important; font-size: 0.6875rem !important; font-family: 'Consolas', monospace !important; color: var(--wpp-text-secondary) !important; }
.wpp-location-btns { position: absolute !important; top: 0.75rem !important; right: 0.75rem !important; z-index: 1000 !important; display: flex !important; gap: 0.25rem !important; flex-wrap: wrap !important; max-width: 180px !important; justify-content: flex-end !important; }
.wpp-location-btn { background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 4px !important; padding: 0.3rem 0.5rem !important; color: var(--wpp-text-secondary) !important; font-size: 0.625rem !important; cursor: pointer !important; }
.wpp-location-btn:hover { background: var(--wpp-bg-tertiary) !important; color: var(--wpp-text-primary) !important; }
/* 3D PREVIEW PANEL - ENHANCED */
.wpp-preview-panel { position: absolute !important; bottom: 0.75rem !important; right: 0.75rem !important; z-index: 1000 !important; width: 400px !important; height: 320px !important; background: var(--wpp-bg-secondary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 10px !important; overflow: hidden !important; display: none !important; transition: all 0.3s ease !important; }
.wpp-preview-panel.wpp-visible { display: flex !important; flex-direction: column !important; }
.wpp-preview-panel.wpp-fullscreen { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; z-index: 999999 !important; }
.wpp-preview-header { padding: 0.5rem 0.75rem !important; background: var(--wpp-bg-tertiary) !important; border-bottom: 1px solid var(--wpp-border-color) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-shrink: 0 !important; }
.wpp-preview-title { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--wpp-text-primary) !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; }
.wpp-preview-controls { display: flex !important; gap: 0.25rem !important; align-items: center !important; }
.wpp-preview-btn { padding: 0.25rem 0.4rem !important; background: var(--wpp-bg-elevated) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 4px !important; color: var(--wpp-text-muted) !important; font-size: 0.625rem !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 0.2rem !important; }
.wpp-preview-btn:hover { background: var(--wpp-accent-orange) !important; color: white !important; border-color: var(--wpp-accent-orange) !important; }
.wpp-preview-btn.wpp-active { background: var(--wpp-accent-green) !important; border-color: var(--wpp-accent-green) !important; color: white !important; }
.wpp-preview-btn svg { width: 12px !important; height: 12px !important; }
.wpp-preview-content { flex: 1 !important; position: relative !important; overflow: hidden !important; }
.wpp-preview-3d { width: 100% !important; height: 100% !important; }
.wpp-preview-toolbar { position: absolute !important; top: 0.5rem !important; left: 0.5rem !important; display: flex !important; flex-direction: column !important; gap: 0.25rem !important; z-index: 10 !important; }
.wpp-3d-btn { width: 32px !important; height: 32px !important; background: rgba(19, 26, 39, 0.9) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 4px !important; color: var(--wpp-text-secondary) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.625rem !important; font-weight: 600 !important; }
.wpp-3d-btn:hover { background: var(--wpp-accent-orange) !important; color: white !important; }
.wpp-3d-btn.wpp-active { background: var(--wpp-accent-blue) !important; color: white !important; }
.wpp-preview-legend { position: absolute !important; bottom: 0.5rem !important; left: 0.5rem !important; background: rgba(19, 26, 39, 0.9) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.5rem !important; font-size: 0.5625rem !important; }
.wpp-legend-item { display: flex !important; align-items: center !important; gap: 0.3rem !important; color: var(--wpp-text-secondary) !important; margin-bottom: 0.2rem !important; }
.wpp-legend-color { width: 12px !important; height: 12px !important; border-radius: 2px !important; }
.wpp-preview-info { position: absolute !important; top: 0.5rem !important; right: 0.5rem !important; background: rgba(19, 26, 39, 0.9) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.4rem 0.6rem !important; font-size: 0.625rem !important; color: var(--wpp-text-secondary) !important; font-family: 'Consolas', monospace !important; }
.wpp-anim-progress { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: var(--wpp-bg-elevated) !important; }
.wpp-anim-progress-bar { height: 100% !important; background: var(--wpp-accent-green) !important; width: 0% !important; transition: width 0.1s linear !important; }
.wpp-stats { padding: 0.875rem !important; border-top: 1px solid var(--wpp-border-color) !important; background: linear-gradient(180deg, var(--wpp-bg-tertiary) 0%, var(--wpp-bg-secondary) 100%) !important; flex-shrink: 0 !important; }
.wpp-stats-title { font-size: 0.625rem !important; font-weight: 700 !important; color: var(--wpp-text-muted) !important; text-transform: uppercase !important; margin-bottom: 0.5rem !important; }
.wpp-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; }
.wpp-stat-card { background: var(--wpp-bg-elevated) !important; border-radius: 6px !important; padding: 0.5rem !important; text-align: center !important; }
.wpp-stat-value { font-size: 0.9rem !important; font-weight: 700 !important; font-family: 'Consolas', monospace !important; }
.wpp-stat-value.wpp-blue { color: var(--wpp-accent-blue) !important; } .wpp-stat-value.wpp-green { color: var(--wpp-accent-green) !important; } .wpp-stat-value.wpp-cyan { color: var(--wpp-accent-cyan) !important; }
.wpp-stat-label { font-size: 0.5625rem !important; color: var(--wpp-text-muted) !important; text-transform: uppercase !important; margin-top: 0.1rem !important; }
.wpp-section { margin-bottom: 1.5rem !important; }
.wpp-section-title { font-size: 0.625rem !important; font-weight: 700 !important; color: var(--wpp-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 0.75rem !important; padding-bottom: 0.4rem !important; border-bottom: 1px solid var(--wpp-border-color) !important; }
.wpp-setting-row { margin-bottom: 1.125rem !important; }
.wpp-setting-label { display: flex !important; justify-content: space-between !important; align-items: baseline !important; font-size: 0.75rem !important; color: var(--wpp-text-secondary) !important; margin-bottom: 0.5rem !important; }
.wpp-setting-value { color: var(--wpp-accent-orange) !important; font-weight: 600 !important; font-family: 'Consolas', monospace !important; }
.wpp-slider { width: 100% !important; height: 5px !important; -webkit-appearance: none !important; appearance: none !important; background: var(--wpp-bg-elevated) !important; border-radius: 2px !important; outline: none !important; cursor: pointer !important; }
.wpp-slider::-webkit-slider-thumb { -webkit-appearance: none !important; width: 17px !important; height: 17px !important; background: var(--wpp-accent-orange) !important; border-radius: 50% !important; cursor: pointer !important; }
.wpp-checkbox-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.5rem 0 !important; }
.wpp-checkbox-row input[type="checkbox"] { width: 14px !important; height: 14px !important; accent-color: var(--wpp-accent-orange) !important; }
.wpp-checkbox-row label { font-size: 0.75rem !important; color: var(--wpp-text-secondary) !important; cursor: pointer !important; }
.wpp-quick-gen { background: linear-gradient(135deg, rgba(249,115,22,0.12) 0%, rgba(234,88,12,0.06) 100%) !important; border: 1px solid rgba(249,115,22,0.35) !important; border-radius: 8px !important; padding: 1rem !important; margin-bottom: 1.125rem !important; }
.wpp-quick-gen-title { font-size: 0.8125rem !important; font-weight: 700 !important; color: var(--wpp-accent-orange) !important; margin-bottom: 0.875rem !important; }
.wpp-info-box { background: var(--wpp-bg-tertiary) !important; border-radius: 5px !important; padding: 0.65rem 0.75rem !important; font-size: 0.6875rem !important; line-height: 1.5 !important; color: var(--wpp-text-secondary) !important; margin: 0.75rem 0 !important; }
.wpp-btn-full { width: 100% !important; justify-content: center !important; padding: 0.6rem 0.75rem !important; }
.wpp-alert { padding: 0.7rem 0.85rem !important; border-radius: 6px !important; font-size: 0.75rem !important; line-height: 1.5 !important; margin-bottom: 1.125rem !important; display: flex !important; align-items: flex-start !important; gap: 0.375rem !important; }
.wpp-alert svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; margin-top: 0.1rem !important; }
.wpp-alert-info { background: rgba(59, 130, 246, 0.1) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; color: var(--wpp-accent-blue) !important; }
.wpp-alert-photo { background: rgba(168, 85, 247, 0.1) !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; color: var(--wpp-accent-purple) !important; }
.wpp-templates { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; margin-bottom: 1.125rem !important; }
.wpp-template-btn { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.55rem 0.375rem !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.2rem !important; }
.wpp-template-btn:hover { background: var(--wpp-bg-elevated) !important; border-color: var(--wpp-accent-orange) !important; }
.wpp-template-btn.wpp-active { background: rgba(249, 115, 22, 0.15) !important; border-color: var(--wpp-accent-orange) !important; }
.wpp-template-icon { width: 28px !important; height: 28px !important; color: var(--wpp-text-secondary) !important; }
.wpp-template-btn:hover .wpp-template-icon, .wpp-template-btn.wpp-active .wpp-template-icon { color: var(--wpp-accent-orange) !important; }
.wpp-template-btn span { font-size: 0.5625rem !important; color: var(--wpp-text-muted) !important; text-transform: uppercase !important; }
.wpp-photo-templates { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; margin-bottom: 1.125rem !important; }
.wpp-photo-template { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 8px !important; padding: 0.9rem !important; cursor: pointer !important; }
.wpp-photo-template:hover { background: var(--wpp-bg-elevated) !important; border-color: var(--wpp-accent-purple) !important; }
.wpp-photo-template.wpp-active { background: rgba(168, 85, 247, 0.15) !important; border-color: var(--wpp-accent-purple) !important; }
.wpp-photo-template-icon { font-size: 1.5rem !important; margin-bottom: 0.3rem !important; }
.wpp-photo-template-name { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--wpp-text-primary) !important; margin-bottom: 0.2rem !important; }
.wpp-photo-template-desc { font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; line-height: 1.3 !important; }
.wpp-marker { background: linear-gradient(135deg, var(--wpp-accent-blue) 0%, #2563eb 100%) !important; border: 2px solid white !important; border-radius: 50% !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 700 !important; color: white !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; margin-left: -12px !important; margin-top: -12px !important; }
.wpp-marker.wpp-selected { background: linear-gradient(135deg, var(--wpp-accent-orange) 0%, #ea580c 100%) !important; transform: scale(1.15) !important; }
.wpp-poi-marker { background: linear-gradient(135deg, var(--wpp-accent-purple) 0%, #7c3aed 100%) !important; width: 32px !important; height: 32px !important; margin-left: -16px !important; margin-top: -16px !important; font-size: 14px !important; }
.wpp-vertex { width: 14px !important; height: 14px !important; background: var(--wpp-accent-purple) !important; border: 2px solid white !important; border-radius: 50% !important; cursor: grab !important; margin-left: -7px !important; margin-top: -7px !important; }
.wpp-midpoint { width: 12px !important; height: 12px !important; background: rgba(168, 85, 247, 0.25) !important; border: 2px dashed var(--wpp-accent-purple) !important; border-radius: 50% !important; cursor: pointer !important; margin-left: -6px !important; margin-top: -6px !important; opacity: 0.6 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; color: var(--wpp-accent-purple) !important; }
.wpp-midpoint:hover { opacity: 1 !important; transform: scale(1.2) !important; }
.wpp-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(3px) !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 999998 !important; }
.wpp-modal-overlay.wpp-active { display: flex !important; }
.wpp-modal { background: var(--wpp-bg-secondary) !important; border-radius: 12px !important; width: 420px !important; max-width: 90% !important; border: 1px solid var(--wpp-border-color) !important; overflow: hidden !important; }
.wpp-modal-header { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--wpp-border-color) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.wpp-modal-header h2 { font-size: 1rem !important; font-weight: 700 !important; color: var(--wpp-text-primary) !important; }
.wpp-modal-close { background: transparent !important; border: none !important; color: var(--wpp-text-muted) !important; cursor: pointer !important; }
.wpp-modal-content { padding: 1.25rem !important; }
.wpp-modal-stats { background: var(--wpp-bg-tertiary) !important; border-radius: 6px !important; padding: 0.75rem !important; margin: 0.75rem 0 !important; }
.wpp-modal-stat { display: flex !important; justify-content: space-between !important; font-size: 0.8125rem !important; padding: 0.3rem 0 !important; }
.wpp-modal-stat:not(:last-child) { border-bottom: 1px solid var(--wpp-border-color) !important; }
.wpp-modal-stat-label { color: var(--wpp-text-muted) !important; } .wpp-modal-stat-value { font-weight: 600 !important; font-family: 'Consolas', monospace !important; color: var(--wpp-text-primary) !important; }
.wpp-modal-buttons { display: flex !important; gap: 0.5rem !important; margin-top: 1rem !important; flex-wrap: wrap !important; }
.wpp-modal-buttons .wpp-btn { flex: 1 !important; min-width: 100px !important; padding: 0.625rem !important; justify-content: center !important; }

/* ===== ZAKLADKA BUDYNEK (v1.1) ===== */
.km-wpp-dropzone { border: 2px dashed var(--wpp-border-light) !important; border-radius: 8px !important; padding: 1.75rem 1rem !important; text-align: center !important; cursor: pointer !important; background: var(--wpp-bg-tertiary) !important; transition: all 0.2s !important; margin-bottom: 1.125rem !important; }
.km-wpp-dropzone:hover, .km-wpp-dropzone.is-over { border-color: var(--wpp-accent-purple) !important; background: rgba(168, 85, 247, 0.08) !important; }
.km-wpp-dropzone__icon { font-size: 2rem !important; margin-bottom: 0.6rem !important; }
.km-wpp-dropzone__text { font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--wpp-text-primary) !important; margin-bottom: 0.4rem !important; }
.km-wpp-dropzone__hint { font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; line-height: 1.35 !important; }
.km-wpp-warning { background: rgba(239, 68, 68, 0.1) !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; border-radius: 6px !important; padding: 0.7rem 0.85rem !important; font-size: 0.6875rem !important; color: #fca5a5 !important; margin-bottom: 1.125rem !important; line-height: 1.55 !important; }
.km-wpp-photo-marker { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--wpp-accent-cyan) 0%, #0891b2 100%) !important; border: 2px solid white !important; color: white !important; font-size: 12px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.35) !important; }
.km-wpp-photo-marker.no-dir { background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; }

/* ===== ZAKLADKA Z DRONA (v1.2) ===== */
.km-wpp-dropzone--drone:hover, .km-wpp-dropzone--drone.is-over { border-color: var(--wpp-accent-green) !important; background: rgba(34, 197, 94, 0.08) !important; }
.km-wpp-drone-marker { width: 20px !important; height: 20px !important; border-radius: 3px !important; background: linear-gradient(135deg, var(--wpp-accent-orange) 0%, #ea580c 100%) !important; border: 2px solid white !important; color: white !important; font-size: 9px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.35) !important; }
.km-wpp-drone-marker.partial { background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; }
.km-wpp-legend-box { background: var(--wpp-bg-tertiary) !important; border-radius: 6px !important; padding: 0.7rem 0.85rem !important; margin-bottom: 1.125rem !important; }
.km-wpp-legend-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.625rem !important; color: var(--wpp-text-secondary) !important; padding: 0.28rem 0 !important; }
.km-wpp-dot { width: 10px !important; height: 10px !important; border-radius: 2px !important; flex-shrink: 0 !important; }
.km-wpp-dot--drone { background: var(--wpp-accent-orange) !important; }
.km-wpp-dot--hit { background: var(--wpp-accent-green) !important; border-radius: 50% !important; }
.km-wpp-dot--outline { background: transparent !important; border: 2px dashed var(--wpp-accent-green) !important; }

/* ===== ZAKLADKA PRZESZKODY (v1.3) ===== */
.km-wpp-haz-types { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; margin-bottom: 1.125rem !important; }
.km-wpp-haz-type { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 5px !important; padding: 0.55rem 0.3rem !important; min-height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--wpp-text-secondary) !important; font-size: 0.625rem !important; cursor: pointer !important; text-align: center !important; }
.km-wpp-haz-type:hover { background: var(--wpp-bg-elevated) !important; color: var(--wpp-text-primary) !important; }
.km-wpp-haz-type.is-active { background: rgba(234, 179, 8, 0.18) !important; border-color: var(--wpp-accent-yellow) !important; color: var(--wpp-accent-yellow) !important; }
.km-wpp-haz-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; background: var(--wpp-bg-tertiary) !important; border-left: 3px solid var(--wpp-accent-yellow) !important; border-radius: 5px !important; padding: 0.6rem 0.7rem !important; margin-bottom: 0.4rem !important; }
.km-wpp-haz-item.is-danger { border-left-color: var(--wpp-accent-red) !important; }
.km-wpp-haz-item__name { font-size: 0.75rem !important; color: var(--wpp-text-primary) !important; font-weight: 500 !important; }
.km-wpp-haz-item__detail { font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; }
.km-wpp-haz-report { background: var(--wpp-bg-tertiary) !important; border-radius: 5px !important; padding: 0.7rem 0.85rem !important; font-size: 0.6875rem !important; color: var(--wpp-text-secondary) !important; margin-top: 0.75rem !important; line-height: 1.55 !important; }
.km-wpp-haz-report.is-ok { background: rgba(34,197,94,0.12) !important; border: 1px solid rgba(34,197,94,0.35) !important; color: #86efac !important; }
.km-wpp-haz-report.is-warn { background: rgba(234,179,8,0.12) !important; border: 1px solid rgba(234,179,8,0.35) !important; color: #fde047 !important; }
.km-wpp-haz-report.is-danger { background: rgba(239,68,68,0.12) !important; border: 1px solid rgba(239,68,68,0.4) !important; color: #fca5a5 !important; }
.km-wpp-obstacle-pin { background: var(--wpp-accent-yellow) !important; color: #1c1917 !important; font-size: 9px !important; font-weight: 700 !important; padding: 1px 4px !important; border-radius: 3px !important; text-align: center !important; white-space: nowrap !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
.km-wpp-obstacle-pin.is-danger { background: var(--wpp-accent-red) !important; color: white !important; }
.wpp-marker.km-wpp-marker-hazard { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.4) !important; }
.km-wpp-clearance-note { font-size: 0.6875rem !important; line-height: 1.55 !important; padding: 0.6rem 0.75rem !important; border-radius: 5px !important; margin-top: 0.6rem !important; }
.km-wpp-clearance-note.is-risky { background: rgba(234,179,8,0.12) !important; border: 1px solid rgba(234,179,8,0.35) !important; color: #fde047 !important; }
.km-wpp-clearance-note.is-blocked { background: rgba(239,68,68,0.12) !important; border: 1px solid rgba(239,68,68,0.4) !important; color: #fca5a5 !important; }

/* ===== POPRAWKI ODSTEPOW (v1.3.1) ===== */
/* Wiersz recznego wpisania odstepu: pole + jednostka + presety. */
.km-wpp-margin-row { display: flex !important; align-items: center !important; gap: 0.4rem !important; margin-top: 0.6rem !important; }
.km-wpp-margin-input { width: 64px !important; padding: 0.35rem 0.5rem !important; font-size: 0.8125rem !important; text-align: center !important; }
.km-wpp-margin-unit { font-size: 0.6875rem !important; color: var(--wpp-text-muted) !important; margin-right: 0.2rem !important; }
.km-wpp-margin-presets { display: flex !important; gap: 0.3rem !important; margin-left: auto !important; }
.km-wpp-margin-presets .wpp-btn { padding: 0.35rem 0.6rem !important; font-size: 0.6875rem !important; min-width: 34px !important; justify-content: center !important; }

/* Ostatnia sekcja nie potrzebuje marginesu - inaczej robi sie pusty pas
   na dole panelu przy przewijaniu. */
.wpp-panel-scroll > .wpp-section:last-child,
.wpp-panel-scroll > div:last-child { margin-bottom: 0 !important; }

/* Odstep miedzy przyciskami akcji na dole zakladek. */
.wpp-panel-scroll .wpp-btn-full + .wpp-btn-full { margin-top: 0.5rem !important; }


/* Na waskich ekranach dwa panele (380 + 340 px) zjadalyby cala mape.
   Zwezamy je, a ponizej 900 px lewy panel startuje zwiniety - uzytkownik
   rozwija go przyciskiem, ktory i tak jest pod reka. */
@media (max-width: 1400px) {
    .wpp-app-container { --wpp-left-panel-width: 340px !important; --wpp-right-panel-width: 300px !important; }
}
@media (max-width: 1100px) {
    .wpp-app-container { --wpp-left-panel-width: 300px !important; --wpp-right-panel-width: 280px !important; }
    .wpp-panel-left .wpp-tab { font-size: 0.625rem !important; padding: 0.45rem 0.2rem !important; }
    .wpp-panel-scroll { padding: 0.7rem !important; }
}
@media (max-width: 900px) {
    .wpp-map-search { display: none !important; }
    .wpp-location-btns { max-width: 120px !important; }
}

/* ===== ZAKLADKA POKRYCIE (v1.4) ===== */
.km-wpp-map-presets { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.45rem !important; margin-bottom: 1.125rem !important; }
.km-wpp-map-preset { background: var(--wpp-bg-tertiary) !important; border: 1px solid var(--wpp-border-color) !important; border-radius: 6px !important; padding: 0.6rem 0.4rem !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; gap: 0.15rem !important; text-align: center !important; }
.km-wpp-map-preset:hover { background: var(--wpp-bg-elevated) !important; border-color: var(--wpp-accent-cyan) !important; }
.km-wpp-map-preset.is-active { background: rgba(6, 182, 212, 0.15) !important; border-color: var(--wpp-accent-cyan) !important; }
.km-wpp-map-preset strong { font-size: 0.6875rem !important; color: var(--wpp-text-primary) !important; font-weight: 600 !important; }
.km-wpp-map-preset span { font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; font-family: 'Consolas', monospace !important; }
.km-wpp-map-preset.is-active strong { color: var(--wpp-accent-cyan) !important; }
.km-wpp-mirror { background: rgba(6, 182, 212, 0.1) !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; border-radius: 5px !important; padding: 0.55rem 0.7rem !important; font-size: 0.75rem !important; color: var(--wpp-accent-cyan) !important; font-weight: 600 !important; font-family: 'Consolas', monospace !important; text-align: center !important; }
.km-wpp-cam-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; margin: 0.75rem 0 !important; }
.km-wpp-cam-grid label { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; font-size: 0.625rem !important; color: var(--wpp-text-muted) !important; }
.km-wpp-cam-grid input { width: 100% !important; padding: 0.35rem 0.5rem !important; font-size: 0.75rem !important; }