:root {
  --bg-dark: #121216;
  --bg-card: #1c1c24;
  --bg-canvas: #15151a;
  --accent-color: #2563eb;
  --accent-hover: #1d4ed8;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --border-color: #2e2e3e;
  --danger-color: #ef4444;
  --success-color: #10b981;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* NAVBAR */
.navbar {
  height: 52px; background: var(--bg-card); border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 10;
}
.brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; color: #fff; }
.btn {
  background: #2a2a38; color: #fff; border: 1px solid var(--border-color);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease;
}
.btn:hover { background: #37374a; }
.btn-primary { background: var(--accent-color); border-color: var(--accent-color); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger-color); border-color: var(--danger-color); }
.btn-sm { padding: 4px 8px; font-size: 0.75rem; }

.lang-btn { background: #1a1a24; color: #9ca3af; border: none; padding: 2px 8px; font-weight: 700; }
.lang-btn.active { background: var(--accent-color); color: #fff; }

.btn-event-select {
  background: #1e1e2d; border-color: var(--accent-color); color: #fff; padding: 6px 14px;
}
.btn-event-select:hover { background: #27273a; }

/* LAYOUT */
.main-container { flex: 1; display: flex; overflow: hidden; position: relative; }

/* WORKSPACE */
.workspace { flex: 1; display: flex; flex-direction: column; background: var(--bg-canvas); position: relative; }

/* ZAKŁADKI KATEGORII I DYSTANSU */
.nav-tabs-bar { background: var(--bg-card); border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; }
.category-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px 0 12px; border-bottom: 1px solid var(--border-color); align-items: center; }
.tab-btn {
  background: #15151c; color: var(--text-muted); border: 1px solid var(--border-color); border-bottom: none;
  padding: 6px 12px; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.tab-btn.active { background: var(--bg-canvas); color: #fff; border-color: var(--accent-color); }

.distance-pills { display: flex; gap: 6px; padding: 8px 12px; align-items: center; overflow-x: auto; }
.pill-btn {
  background: #242432; color: var(--text-muted); border: 1px solid var(--border-color);
  padding: 4px 10px; border-radius: 14px; cursor: pointer; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.pill-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

/* TOOLBAR & KANWA */
.editor-toolbar {
  height: 42px; background: #181820; border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.canvas-container { flex: 1; position: relative; overflow-x: auto; overflow-y: auto; background: var(--bg-canvas); }
svg#diagram-canvas { width: 100%; min-height: 100%; cursor: default; display: block; }

.selection-box {
  fill: rgba(37, 99, 235, 0.15);
  stroke: var(--accent-color);
  stroke-width: 1px;
  stroke-dasharray: 4;
  pointer-events: none;
}

/* UCHWYT ROZCIĄGANIA RAMKI */
.dist-resize-handle:hover rect { fill: var(--accent-color); }
.dist-resize-handle:hover text { fill: #ffffff; }

/* STYLIZACJA BLOKÓW W WIDOKU ROBOCZYM */
.node-group { cursor: move; user-select: none; }
.node-rect { fill: #22222e; stroke: #4f4f66; stroke-width: 2px; rx: 6px; }
.node-group.selected .node-rect { stroke: var(--accent-color); stroke-width: 3px; fill: #2a2a3c; }
.node-group.final .node-rect { fill: #1e293b; stroke: #3b82f6; }

/* NOTATKA TEKSTOWA NA KANWIE */
.node-note .note-rect { fill: #2a2415; stroke: #ca8a04; stroke-width: 2px; rx: 6px; }
.node-note.selected .note-rect { stroke: #facc15; stroke-width: 3px; fill: #3f3218; }
.note-text { fill: #fef08a; font-size: 12px; font-weight: 600; }

.node-title { fill: #ffffff; font-size: 13px; font-weight: 700; text-anchor: middle; }
.node-heats { fill: #fbbf24; font-size: 11px; font-weight: 700; text-anchor: middle; }
.node-count { fill: #60a5fa; font-size: 11px; font-weight: 700; text-anchor: middle; }
.node-group-label { fill: #e2e8f0; font-size: 11px; font-weight: 700; text-anchor: start; }

.edge-line { stroke: #94a3b8; stroke-width: 2px; cursor: pointer; }
.edge-line.main-path { stroke: #f59e0b; stroke-width: 4px; }
.edge-line.selected { stroke: var(--accent-color); stroke-width: 4px; }
.edge-label { fill: #ffffff; font-size: 11px; font-weight: 700; text-anchor: middle; }

/* INSPEKTOR PRAWY */
.inspector { width: 290px; background: var(--bg-card); border-left: 1px solid var(--border-color); padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  background: #141419; border: 1px solid var(--border-color); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem;
}

/* KARTY IMPREZ W MODALU */
.event-card {
  background: #15151c; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.event-card.active, .event-card:hover { border-color: var(--accent-color); }
.event-card-main { flex: 1; cursor: pointer; }
.event-card .title { font-weight: 600; font-size: 0.88rem; color: #fff; margin-bottom: 4px; }
.event-card .meta { font-size: 0.75rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.badge-ozr { background: #1e3a8a; color: #93c5fd; }
.badge-danubia { background: #831843; color: #fbcfe8; }

/* PODŚWIETLANE PIGUŁKI KATEGORII */
.category-pills-selector { display: flex; flex-wrap: wrap; gap: 6px; background: #141419; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); }
.cat-select-btn {
  background: #1c1c28; color: var(--text-muted); border: 1px solid var(--border-color);
  padding: 6px 12px; border-radius: 16px; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: all 0.15s ease;
}
.cat-select-btn:hover { background: #28283a; }
.cat-select-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

/* UŁOŻENIE KATEGORII I DYSTANSU POZIOMO Z KOLEJNOŚCIĄ */
.dist-config-box { display: flex; flex-direction: column; gap: 8px; background: #141419; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); max-height: 250px; overflow-y: auto; }
.dist-config-card { background: #1c1c26; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dist-cat-name { font-size: 0.8rem; font-weight: 700; color: #fff; min-width: 120px; white-space: nowrap; }
.dist-pills-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }

.dist-pill-tag {
  background: #282838; color: var(--text-muted); border: 1px solid var(--border-color);
  padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease;
}
.dist-pill-tag.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.dist-reorder-btn {
  background: transparent; border: none; color: #9ca3af; cursor: pointer; font-size: 10px; padding: 0 2px;
}
.dist-reorder-btn:hover { color: #fff; }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.active { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; width: 450px; max-width: 95%; overflow: hidden; }
.modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }

.autosave-badge { font-size: 0.7rem; color: var(--success-color); display: flex; align-items: center; gap: 4px; font-weight: 600; }