:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; --border:#d1d5db; --text:#202938; --blue:#2563eb; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
button:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid var(--blue);outline-offset:2px; }
.app-layout { display:flex; width:100%;height:100vh;height:100dvh;overflow:hidden; }
.sidebar { width:25%; flex:0 0 25%; height:100%; background:#f5f6f8;border-right:1px solid var(--border); padding:14px; overflow-y:auto;color:var(--text); }
.toolbar { display:flex;gap:8px;margin-bottom:18px; }
.tool-button { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;padding:9px;border:1px solid #bfc5ce;border-radius:6px;background:#fff;color:#374151; }
.tool-button svg { width:100%;height:100%; }
.tool-button:hover { background:#e7ebf0; }
.categories { display:flex;flex-direction:column;gap:8px; }
.category { border:1px solid var(--border);background:#fff;border-radius:6px;overflow:hidden; }
.category summary { padding:13px 14px;font-size:15px;font-weight:600;cursor:pointer;user-select:none; }
.category summary:hover { background:#eef1f5; }
.category-content { min-height:40px;border-top:1px solid var(--border); }
.routes-content { padding:9px;display:flex;flex-direction:column;gap:8px; }
.routes-list { display:flex;flex-direction:column;gap:7px; }
.route-card { display:flex;align-items:center;gap:4px;min-height:43px;border:1px solid #d5dce5;background:#fff;border-radius:6px;padding:5px 6px; }
.route-card.active { background:#e9f1ff;border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue); }
.route-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;border:none;padding:7px 4px;color:var(--text);font-size:13px; }
.route-actions { display:flex;gap:2px; }
.icon-action { flex:0 0 27px;width:27px;height:29px;border:none;border-radius:4px;background:transparent;color:#485569;font-size:16px;display:grid;place-items:center;padding:4px; }
.icon-action:hover { background:#dce8fa;color:#143c8c; }
.icon-action svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.icon-action.is-editing { background:#d1e3ff;color:#154fae; }
.icon-action.delete:hover { background:#fee2e2;color:#a61b1b; }
.add-route { width:100%;min-height:36px;background:#f8fafc;border:1px dashed #9baabd;border-radius:6px;color:#334155;font-weight:600;font-size:13px; }
.add-route:hover { background:#edf3ff;border-color:var(--blue); }
.map-area { position:relative;flex:1;min-width:0;height:100%;background:#fff;overflow:hidden;touch-action:none;cursor:grab; }
.map-area.panning { cursor:grabbing; }
.map-area.drawing { cursor:crosshair; }
#map-canvas,#route-layer { position:absolute;inset:0;width:100%;height:100%;display:block; }
#route-layer { pointer-events:none;overflow:visible; }
#route-layer .route-segment { stroke:#2563eb;stroke-width:3;fill:none;stroke-linejoin:round;pointer-events:stroke; }
#route-layer .route-segment.selected { stroke:#d97706;stroke-width:4; }
#route-layer .route-point { fill:#fff;stroke:#2563eb;stroke-width:2.5;pointer-events:all;cursor:move; }
#route-layer .route-point.selected { fill:#facc15;stroke:#92400e; }
#route-layer .draft-point { fill:#60a5fa;stroke:#fff;stroke-width:2;pointer-events:none; }
.zoom-controls { position:absolute;right:15px;bottom:15px;display:flex;flex-direction:column;align-items:center;border:1px solid #b9c1cc;border-radius:8px;background:#fff;box-shadow:0 2px 8px #00000018;overflow:hidden;z-index:3;user-select:none; }
.zoom-controls button { width:48px;height:36px;border:0;background:#fff;font-size:23px;line-height:1;color:#334155; }
.zoom-controls button:hover { background:#eef2f7; }
.zoom-controls output { display:grid;place-items:center;width:58px;min-height:29px;font-size:12px;font-weight:bold;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed;font-variant-numeric:tabular-nums; }
.editor { position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);width:min(850px,calc(100% - 140px));background:#ffffffed;backdrop-filter:blur(8px);border:1px solid #c5ceda;border-radius:10px;padding:10px;box-shadow:0 5px 23px #00000025; }
.hidden { display:none!important; }
.editor-buttons { display:flex;gap:6px;flex-wrap:wrap; }
.editor-buttons button,.precision button { border:1px solid #bdc7d5;background:#f8fafc;border-radius:5px;padding:8px 10px;font-size:12px; }
.editor-buttons button:hover:not(:disabled),.precision button:hover:not(:disabled) { background:#e2eaf8; }
.editor-buttons button.active { background:#dbeafe;border-color:#2563eb;color:#154fbd;font-weight:bold; }
#finish-edit { margin-left:auto; }
.precision { display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:9px;font-size:12px; }
.precision label { display:flex;align-items:center;gap:5px;white-space:nowrap; }
.precision input { width:92px;padding:6px;border:1px solid #b7c4d4;border-radius:5px;font-size:12px; }
#selection-info { flex:1;min-width:145px; }
.editor-hint { font-size:11px;color:#69768a;margin-top:7px; }
dialog { border:1px solid #cbd5e1;border-radius:9px;padding:20px;box-shadow:0 8px 35px #0003;max-width:min(380px,90vw); }
dialog::backdrop { background:#0007; }
.dialog-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:22px; }
.dialog-actions button { padding:8px 14px;border:1px solid #b8c2ce;background:#f8fafc;border-radius:5px; }
.dialog-actions .danger { background:#b91c1c;color:white;border-color:#b91c1c; }
@media(max-width:1000px) { .route-card { flex-wrap:wrap; }.route-actions { margin-left:auto; }.route-name { flex-basis:100%; } }

/* FBProject v.0.3: siatka edycji i wyjście z trasy. */
.grid-controls { position:absolute;top:15px;left:15px;z-index:4;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;border:1px solid #b9c1cc;border-radius:8px;background:#fffffff2;box-shadow:0 2px 8px #00000018;color:#334155;font-size:12px; }
.grid-controls label { display:flex;align-items:center;gap:5px;white-space:nowrap; }
.grid-controls input[type=number] { width:65px;padding:5px;border:1px solid #b7c4d4;border-radius:4px;font-size:12px; }
.grid-controls input[type=checkbox] { accent-color:#2563eb; }
.exit-route { position:absolute;top:15px;right:15px;z-index:4;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #b9c1cc;border-radius:7px;padding:8px 12px;font-size:13px;color:#334155;box-shadow:0 2px 8px #00000018; }
.exit-route span { font-size:21px;line-height:14px; }
.exit-route:hover { background:#f1f5f9; }

/* v.0.4: wygodniejsze trafianie w segment bez pogrubienia rysowanej linii. */
#route-layer .segment-hit { fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer; }
#route-layer .route-point { cursor:move; }

/* v.0.5 — zaznaczenie obszarowe i interfejs pojazdów. */
.map-area { cursor:default; }
.map-area.panning { cursor:grabbing; }
#vehicle-layer { position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible; }
.selection-rect { position:absolute;z-index:2;pointer-events:none;border:1px solid #2563eb;background:rgba(37,99,235,.13); }
.vehicle-editor { position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:min(610px,calc(100% - 150px));padding:12px 16px;background:#ffffffee;border:1px solid #c5ceda;border-radius:10px;box-shadow:0 5px 23px #00000025;display:flex;flex-direction:column;gap:12px; }
.vehicle-editor-title { font-size:13px;color:#334155; }
.vehicle-editor label { display:grid;grid-template-columns:90px 80px 1fr;align-items:center;gap:12px;font-size:13px;white-space:nowrap; }
.vehicle-editor input { width:100%;accent-color:#2563eb;cursor:pointer; }
.vehicle-editor output { font-variant-numeric:tabular-nums;font-weight:600; }
.vehicle-dialog-title { font-weight:bold;font-size:16px;margin-bottom:18px; }
.vehicle-dialog-actions { display:flex;flex-direction:column;gap:9px;min-width:220px; }
.vehicle-dialog-actions button { border:1px solid #b8c2ce;border-radius:5px;background:#f8fafc;padding:10px 14px;text-align:left; }
.vehicle-dialog-actions button:hover:not(:disabled) { background:#e2eaf8; }

/* v.0.6 — punkt startu, analiza trasy, tryb wykonywania i wektory. */
#execution-layer {position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible;}
#route-layer .route-point.route-start {fill:#22c55e;stroke:#166534;}
#route-layer .route-point.route-start.selected {fill:#22c55e;stroke:#14532d;stroke-width:3.5;}
#route-layer .start-halo {fill:#dcfce7;stroke:#16a34a;stroke-width:2;pointer-events:none;}
#route-layer .start-dot {fill:#16a34a;stroke:white;stroke-width:1.2;pointer-events:none;}
.route-warnings {position:absolute;top:61px;right:15px;z-index:5;display:flex;flex-direction:column;gap:6px;max-width:min(370px,calc(100% - 30px));pointer-events:none;}
.route-warning {background:#fff;border:1px solid;border-radius:7px;padding:9px 12px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #00000018;}
.route-warning.error {color:#991b1b;border-color:#ef4444;background:#fef2f2;}
.route-warning.warning {color:#92400e;border-color:#fb923c;background:#fff7ed;}
.execution-title {position:absolute;top:15px;left:15px;z-index:4;padding:10px 13px;border-radius:7px;background:#fff;border:1px solid #b9c1cc;box-shadow:0 2px 8px #00000018;font-size:13px;font-weight:600;}
.execution-editor {position:absolute;z-index:3;bottom:18px;left:50%;transform:translateX(-50%);background:#ffffffed;border:1px solid #c5ceda;border-radius:10px;box-shadow:0 5px 23px #00000025;padding:12px 17px;font-size:13px;}
.execution-editor label {display:flex;align-items:center;gap:10px;}
.execution-editor input {width:100px;border:1px solid #b7c4d4;border-radius:5px;padding:7px;font-size:13px;}
#execute-route-select {width:100%;padding:8px;margin-top:8px;border:1px solid #b7c4d4;border-radius:5px;}

/* v.0.7 — sterowanie autopilotem w trybie wykonywania. */
.execution-editor {display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:calc(100% - 140px);}
.execution-editor .execution-actions {display:flex;gap:6px;}
.execution-actions button {padding:8px 15px;border:1px solid #bdc7d5;border-radius:5px;background:#f8fafc;}
.execution-actions button:hover:not(:disabled) {background:#dbeafe;}
.execution-editor .execution-speed {display:flex;align-items:center;gap:10px;}
.execution-editor .execution-speed input {width:170px;accent-color:#2563eb;padding:0;border:0;}
.execution-editor output {min-width:63px;font-weight:600;font-variant-numeric:tabular-nums;}