:root { --bridgestone-red: #DA291C; --bridgestone-red-darker: #a71005; --bridgestone-black: #000000; --bridgestone-grey: #666666; } body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 20px; background-color: #f4f4f4; min-height: 100vh; overflow-x: hidden; box-sizing: border-box; } .top-bar { width: 100%; max-width: none; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; box-sizing: border-box; position: relative; z-index: 1000; background-color: #f4f4f4; border-bottom: 3px solid var(--bridgestone-red); } .main-controls { background-color: #fff; padding: 10px 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-grow: 1; } /* === NOWOCZESNE STYLE DLA PRZYCISKÓW W MAIN-CONTROLS === */ .main-controls button, .main-controls input[type="search"] { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 10px 16px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; cursor: pointer; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.9em; font-weight: 500; color: #2c3e50; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .main-controls button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .main-controls button:hover::before { left: 100%; } .main-controls button:hover, .main-controls input[type="search"]:hover, #shortcut-show-dependencies-button:hover:not(:disabled), #shortcut-simulate-impact-button:hover:not(:disabled) { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .main-controls button:active, .main-controls input[type="search"]:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* === NOWOCZESNY STYL DLA SHORTCUT BUTTONS === */ #shortcut-show-dependencies-button, #shortcut-simulate-impact-button { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 16px; font-weight: 500; font-size: 0.9em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } #shortcut-show-dependencies-button::before, #shortcut-simulate-impact-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } #shortcut-show-dependencies-button:hover::before, #shortcut-simulate-impact-button:hover::before { left: 100%; } #shortcut-show-dependencies-button svg, #shortcut-simulate-impact-button svg { vertical-align: middle; } #shortcut-show-dependencies-button:disabled, #shortcut-simulate-impact-button:disabled { opacity: 0.4; cursor: not-allowed; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; color: #6c757d !important; } #shortcut-show-dependencies-button:disabled:hover, #shortcut-simulate-impact-button:disabled:hover { transform: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important; } .menu-container { position: relative; display: inline-block; } #menu-button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 600; font-size: 0.95em; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.3); display: flex; align-items: center; gap: 8px; min-width: 100px; justify-content: center; } #menu-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(218, 41, 28, 0.4); } #menu-button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } #menu-content { display: none; position: absolute; top: 100%; left: 0; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1); z-index: 1001; padding: 20px; border-radius: 12px; margin-top: 8px; min-width: 280px; max-height: 75vh; overflow-y: auto; animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top left; } @keyframes menuSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } #menu-content::-webkit-scrollbar { width: 6px; } #menu-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; } #menu-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } #menu-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } #menu-content button, #menu-content label#json-file-input-label { display: flex; align-items: center; width: 100%; margin-bottom: 8px; text-align: left; box-sizing: border-box; padding: 12px 16px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; cursor: pointer; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.9em; font-weight: 500; color: #2c3e50; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } #menu-content button::before, #menu-content label#json-file-input-label::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } #menu-content button:hover::before, #menu-content label#json-file-input-label:hover::before { left: 100%; } #menu-content button:hover, #menu-content label#json-file-input-label:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } #menu-content button:active, #menu-content label#json-file-input-label:active { transform: translateX(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } #menu-content span#json-file-name { display: block; margin-top: -4px; margin-bottom: 12px; font-size: 0.8em; color: #6c757d; font-style: italic; padding: 4px 8px; background: rgba(108, 117, 125, 0.1); border-radius: 4px; } #json-file-input { display: none; } #menu-content h4 { margin-top: 20px; margin-bottom: 12px; font-size: 0.75em; color: var(--bridgestone-red); text-transform: uppercase; border-bottom: 2px solid rgba(218, 41, 28, 0.2); padding-bottom: 8px; font-weight: 700; letter-spacing: 0.5px; position: relative; } #menu-content h4::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #menu-content h4:first-of-type { margin-top: 0; } #menu-content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); margin: 16px 0; } .menu-item-group { display: flex; align-items: center; margin-bottom: 12px; gap: 12px; background: rgba(248, 249, 250, 0.5); padding: 12px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.05); } .menu-item-group label { font-size: 0.9em; white-space: nowrap; margin-bottom: 0; font-weight: 500; color: #495057; min-width: 80px; } .menu-item-group select, .menu-item-group .delete-view-config-container button { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; cursor: pointer; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.85em; flex-grow: 1; transition: all 0.2s ease; color: #495057; } .menu-item-group select:hover, .menu-item-group .delete-view-config-container button:hover { border-color: rgba(218, 41, 28, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .menu-item-group .delete-view-config-container button { padding: 8px 10px; font-size: 0.8em; flex-grow: 0; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; border: none; min-width: 40px; } .menu-item-group .delete-view-config-container button:hover { background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%); transform: scale(1.05); } .sheet-multi-select-container, .delete-view-config-container { position: relative; display: inline-block; } #menu-content .sheet-multi-select-container button { width: auto; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border: none; font-weight: 500; } #menu-content .sheet-multi-select-container button:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); } #sheet-multi-select-dropdown { display: none; position: absolute; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); z-index: 1002; padding: 12px; border-radius: 8px; margin-top: 8px; min-width: 200px; max-height: 250px; overflow-y: auto; left: 0; animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } #sheet-multi-select-options label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9em; color: #495057; padding: 6px 8px; border-radius: 4px; transition: background-color 0.2s ease; } #sheet-multi-select-options label:hover { background: rgba(0, 123, 255, 0.1); } #sheet-multi-select-options input[type="checkbox"] { margin-right: 8px; } #delete-view-config-dropdown { display: none; position: absolute; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); z-index: 1003; border-radius: 8px; margin-top: 8px; min-width: 180px; max-height: 200px; overflow-y: auto; right: 0; animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #delete-view-config-dropdown .delete-item { padding: 10px 14px; cursor: pointer; font-size: 0.9em; display: block; white-space: nowrap; color: #495057; transition: all 0.2s ease; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } #delete-view-config-dropdown .delete-item:last-child { border-bottom: none; } #delete-view-config-dropdown .delete-item:hover { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; transform: translateX(4px); } #diagram-container { width: 100%; max-width: none; height: 75vh; border: 2px solid var(--bridgestone-red); position: relative; overflow: auto; background-color: #fff; margin-bottom: 20px; cursor: grab; box-sizing: border-box; } #diagram-container:active { cursor: grabbing; } #diagram-zoom-pane { position: relative; width: 100%; height: 100%; transform-origin: 0 0; min-width: 100%; min-height: 100%; } #simulation-ghost-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; } #welcome-message-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.97); z-index: 50; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; box-sizing: border-box; font-size: 1.1em; color: #333; } #welcome-message-overlay h2 { color: var(--bridgestone-red); margin-bottom: 20px; font-size: 1.5em; } #welcome-message-overlay p { margin-bottom: 15px; line-height: 1.7; max-width: 650px; } #welcome-message-overlay strong { color: var(--bridgestone-red-darker); font-weight: 600; } #welcome-message-overlay .highlight-path { font-weight: bold; color: #0056b3; } #welcome-message-overlay .tutorial-prompt { margin-top: 25px; font-size: 0.95em; color: #555; } #welcome-message-overlay .tutorial-prompt .highlight-path { cursor: pointer; text-decoration: underline; } .axis { position: absolute; font-size: 10px; color: #555; z-index: 1; padding: 3px 5px; border-radius: 3px; box-sizing: border-box; } #sticky-y-axis, #sticky-x-axis { position: fixed; background-color: rgba(244, 244, 244, 0.92); z-index: 20; overflow: hidden; box-sizing: border-box; border: 1px solid #ccc; } #sticky-y-axis .axis, #sticky-x-axis .axis { background-color: rgba(255,255,255,0.8); border: 1px solid #eee; color: #333; white-space: nowrap; cursor: pointer !important; pointer-events: auto !important; transition: background-color 0.2s, border-color 0.2s; } #sticky-x-axis .axis { text-align: center; } #sticky-y-axis .axis:hover, #sticky-x-axis .axis:hover { background-color: #e0e0e0; border-color: #ccc; } #sticky-y-axis .axis.active-axis-filter, #sticky-x-axis .axis.active-axis-filter { background-color: #d1eaff; border-color: #a6cfff; font-weight: bold; } .process-node { position: absolute; background-color: #aedff7; border: 1px solid #5da9d4; padding: 5px 7px; font-size: 9px; text-align: center; cursor: pointer; border-radius: 4px; white-space: nowrap; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.3s, border-color 0.3s, opacity 0.3s, top 0.2s ease-out, left 0.2s ease-out; z-index: 5; box-sizing: border-box; } .process-node.can-hover:hover { transform: scale(1.05); box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 10; } .process-node.selected { border-width: 2px !important; z-index: 11 !important; } .process-node.dependent-input { border-width: 2px; } .process-node.dependent-output { border-width: 2px; } .process-node.filtered-out-general, .process-node.filtered-out-axis { opacity: 0.1 !important; z-index: 3 !important; pointer-events: none !important; } .process-node.dimmed-selection { opacity: 0.25 !important; z-index: 4 !important; } .process-node.search-highlight { border: 2px solid #ff8c00 !important; background-color: #ffe0b3 !important; z-index: 12 !important; } .process-node.search-dimmed { opacity: 0.15 !important; z-index: 2 !important; pointer-events: none !important; } .process-node.tree-highlight-dimmed { opacity: 0.1 !important; z-index: 1 !important; pointer-events: none !important; } .process-node .node-type-symbol { position: absolute; top: 1px; right: 2px; font-size: 7px; font-weight: bold; color: #333; background-color: rgba(255, 255, 255, 0.6); padding: 0px 2px; border-radius: 2px; line-height: 1; user-select: none; } /* === STYL DLA STANDARD-BLOCKING - TYLKO PRZERYWANĄ RAMKA === */ .process-node.standard-blocking { border-width: 2px !important; border-style: dashed !important; /* Kolory tła i obramowania są ustawiane dynamicznie w JavaScript */ } .process-node.simulation-target-node { box-shadow: 0 0 8px 2px gold !important; z-index: 25 !important; } .process-node.simulation-new-node { border: 2px dashed #17a2b8 !important; background-color: #e0f7fa !important; z-index: 26 !important; } .process-node.simulation-new-node::after { content: "➕"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #17a2b8; } .process-node.simulation-removed { opacity: 0.4 !important; border-style: dashed !important; border-color: #dc3545 !important; background-color: #f8d7da !important; } .process-node.simulation-removed::after { content: "🚫"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #dc3545; } .process-node.simulation-shifted { border-color: #fd7e14 !important; } .process-node.simulation-shifted::after { content: "↔️"; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 10px; } /* Ogólne style dla węzłów w symulacji */ .process-node.simulation-output-at-risk, .process-node.simulation-input-conflict, .process-node.simulation-ok-input, .process-node.simulation-ok-output { opacity: 1 !important; z-index: 20 !important; } .process-node.simulation-output-at-risk::before, .process-node.simulation-input-conflict::before, .process-node.simulation-ok-input::before, .process-node.simulation-ok-output::before { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 10px; } /* --- NOWE, SZCZEGÓŁOWE STYLE --- */ /* Wejście z problemem (jasnoczerwony) */ .process-node.simulation-input-conflict { background-color: #f8d7da !important; border: 2px solid #dc3545 !important; } .process-node.simulation-input-conflict::before { content: "❗"; color: #dc3545; } /* Wyjście z problemem (ciemnoczerwony) */ .process-node.simulation-output-at-risk { background-color: #e4a1a6 !important; border: 2px solid #a71005 !important; } .process-node.simulation-output-at-risk::before { content: "⏳"; color: #a71005; } /* Poprawne wejście w symulacji (jasnozielony) */ .process-node.simulation-ok-input { background-color: #d4edda !important; border: 2px solid #155724 !important; } .process-node.simulation-ok-input::before { content: "✓"; font-size: 12px; color: #155724; } /* Poprawne wyjście w symulacji (ciemnozielony) */ .process-node.simulation-ok-output { background-color: #a3d9b1 !important; border: 2px solid #0c3c16 !important; } .process-node.simulation-ok-output::before { content: "✓"; font-size: 12px; color: #0c3c16; } .process-node.simulation-dimmed-others { opacity: 0.2 !important; pointer-events: none !important; z-index: 2 !important; } .process-node.simulation-temporary-node { filter: grayscale(30%) opacity(80%); border-style: dotted !important; } .simulation-ghost-node { position: absolute; opacity: 0.35; border-style: dashed !important; border-color: #777 !important; background-color: rgba(174, 223, 247, 0.3) !important; pointer-events: none; z-index: 3; transition: none !important; } #dependency-svg .simulation-impact-path-arrow { stroke-width: 3.5px !important; } #dependency-svg .simulation-arrow { stroke-width: 2.5px; } #dependency-svg .simulation-arrow-broken { stroke-width: 2.5px; stroke: #dc3545; stroke-dasharray: 4, 4; } .bottom-controls-container { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; } .colors-toggle-bar { background-color: #fff; padding: 10px 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #toggle-colors-button { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #e9e9e9; font-size: 0.9em; width: 100%; text-align: left;} #toggle-colors-button:hover { background-color: #ddd; } /* DODAJ TEN FRAGMENT */ #reset-colors-button { /* ZAKTUALIZUJ TE SELEKTORY */ #reset-colors-button, #generate-theme-button { /* <--- DODANO ID */ padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #e9e9e9; font-size: 0.9em; margin-top: 10px; flex-basis: 48%; /* Zmieniamy na 48% by się zmieściły obok siebie */ margin-left: 1%; margin-right: 1%; } #reset-colors-button:hover, #generate-theme-button:hover { /* <--- DODANO ID */ background-color: #ddd; } padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #e9e9e9; font-size: 0.9em; margin-top: 10px; flex-basis: 100%; /* Rozciągnij na całą szerokość */ } #reset-colors-button:hover { background-color: #ddd; } .visual-controls { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-top: 0;} .visual-controls label { font-size: 0.9em; } .visual-controls input[type="color"] { padding: 0; width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } /* === BASIC FALLBACK STYLES FOR PROCESS DETAILS (replaced by advanced styles below) === */ #process-details { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.08); } #process-details h3 { color: #2c3e50; font-weight: 600; } #process-details p { margin: 6px 0; font-size: 0.9em; line-height: 1.5; color: #495057; } #process-details strong { color: #2c3e50; min-width: 150px; display: inline-block; font-weight: 600; } #process-details button { padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; margin-top: 10px; font-size: 0.9em; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } #process-details button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } #dependency-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } #dependency-svg line { stroke-width: 2px; } #dependency-svg .flow-dot { } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fefefe; margin: 5% auto; padding: 25px; border: 1px solid #888; width: 80%; max-width: 700px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .modal-content h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } .modal-content label { display: block; margin-top: 12px; margin-bottom: 5px; font-weight: bold; font-size: 0.9em; color: #555; } .modal-content input[type="text"], .modal-content input[type="time"], .modal-content textarea, .modal-content input[type="number"], .modal-content select { width: calc(100% - 16px); padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9em; box-sizing: border-box; } .modal-content textarea { min-height: 60px; resize: vertical; } .modal-content .button-group { margin-top: 25px; text-align: right; } .modal-content button { padding: 10px 18px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95em; } .modal-content .save-button { background-color: #4CAF50; color: white; } .modal-content .save-button:hover { background-color: #45a049; } .modal-content .cancel-button { background-color: #aaa; color: white; margin-left: 10px; } .modal-content .cancel-button:hover { background-color: #999; } .modal-content .delete-button { background-color: #f44336; color: white; margin-right: auto; float: left; } .modal-content .delete-button:hover { background-color: #e53935; } .modal-content input.invalid, .modal-content textarea.invalid, .modal-content select.invalid { border-color: red; } .modal-content .error-message { color: red; font-size: 0.8em; margin-top: 2px; display: block; min-height: 1em; } #converter-panel, #tutorial-panel { position: fixed; top: 0; width: 350px; height: 100%; background-color: #f8f9fa; padding: 20px; box-sizing: border-box; overflow-y: auto; transition: transform 0.3s ease-in-out; z-index: 999; box-shadow: -2px 0 5px rgba(0,0,0,0.1); } #filter-panel, #simulation-panel, #tutorial-panel { position: fixed; top: 0; height: 100%; box-sizing: border-box; overflow-y: auto; z-index: 999; right: 0; transform: translateX(100%); } #filter-panel.open, #simulation-panel.open, #tutorial-panel.open { transform: translateX(0); } #converter-panel { left: 0; transform: translateX(-100%); } #converter-panel.open { transform: translateX(0); } /* === NOWOCZESNE STYLE DLA PANELU FILTERS === */ #filter-panel { width: 380px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 25px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #filter-panel::-webkit-scrollbar { width: 8px; } #filter-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } #filter-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } #filter-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } #filter-panel h3 { margin-top: 0; margin-bottom: 25px; border-bottom: 3px solid var(--bridgestone-red); padding-bottom: 15px; font-size: 1.4em; font-weight: 700; color: #2c3e50; position: relative; } #filter-panel h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #filter-panel h4 { margin-top: 20px; margin-bottom: 12px; color: var(--bridgestone-red); border-bottom: 2px solid rgba(218, 41, 28, 0.2); padding-bottom: 8px; font-size: 1.1em; font-weight: 600; position: relative; } #filter-panel h4::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #filter-panel p, #filter-panel li, #filter-panel label { font-size: 0.95em; line-height: 1.6; margin-bottom: 10px; color: #495057; } #filter-panel select, #filter-panel input[type="time"], #filter-panel input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.9em; color: #495057; box-sizing: border-box; margin-bottom: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #filter-panel select:hover, #filter-panel input[type="time"]:hover, #filter-panel input[type="text"]:hover { border-color: rgba(218, 41, 28, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } #filter-panel select:focus, #filter-panel input[type="time"]:focus, #filter-panel input[type="text"]:focus { outline: none; border-color: var(--bridgestone-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.1); } #filter-panel .close-panel-button { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); border: none; font-size: 1.8em; cursor: pointer; line-height: 1; width: 45px; height: 45px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(238, 90, 82, 0.3); z-index: 1001; user-select: none; pointer-events: auto; } #filter-panel .close-panel-button:hover { background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%); transform: scale(1.1); box-shadow: 0 4px 12px rgba(238, 90, 82, 0.4); } #filter-panel .close-panel-button:active { transform: scale(0.95); } #filter-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } #apply-filters-button { width: 100%; padding: 12px 16px; background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.95em; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.3); margin-top: 20px; } #apply-filters-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(218, 41, 28, 0.4); } #apply-filters-button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } /* === NOWOCZESNE STYLE DLA PANELU SIMULATION === */ #simulation-panel { width: 400px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 25px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #simulation-panel::-webkit-scrollbar { width: 8px; } #simulation-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } #simulation-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } #simulation-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } #simulation-panel h3 { margin-top: 0; margin-bottom: 25px; border-bottom: 3px solid var(--bridgestone-red); padding-bottom: 15px; font-size: 1.4em; font-weight: 700; color: #2c3e50; position: relative; } #simulation-panel h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #simulation-panel h4 { margin-top: 20px; margin-bottom: 12px; color: var(--bridgestone-red); border-bottom: 2px solid rgba(218, 41, 28, 0.2); padding-bottom: 8px; font-size: 1.1em; font-weight: 600; position: relative; } #simulation-panel h4::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #simulation-panel p, #simulation-panel li, #simulation-panel label { font-size: 0.95em; line-height: 1.6; margin-bottom: 10px; color: #495057; } #simulation-panel select, #simulation-panel input[type="text"], #simulation-panel input[type="number"] { width: 100%; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.9em; color: #495057; box-sizing: border-box; margin-bottom: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #simulation-panel select:hover, #simulation-panel input[type="text"]:hover, #simulation-panel input[type="number"]:hover { border-color: rgba(218, 41, 28, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } #simulation-panel select:focus, #simulation-panel input[type="text"]:focus, #simulation-panel input[type="number"]:focus { outline: none; border-color: var(--bridgestone-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.1); } #simulation-panel button { padding: 10px 16px; background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; border: none; border-radius: 6px; font-weight: 500; font-size: 0.9em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); margin-bottom: 8px; } #simulation-panel button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } #simulation-panel button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(218, 41, 28, 0.3); } #simulation-panel .close-panel-button { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); border: none; font-size: 1.8em; cursor: pointer; line-height: 1; width: 45px; height: 45px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(238, 90, 82, 0.3); z-index: 1001; user-select: none; pointer-events: auto; margin: 0; } #simulation-panel .close-panel-button:hover { background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%); transform: scale(1.1); box-shadow: 0 4px 12px rgba(238, 90, 82, 0.4); } #simulation-panel .close-panel-button:active { transform: scale(0.95); } #simulation-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Style dla kart symulacji */ #simulation-targets-list .sim-card { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 15px; margin-bottom: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } #simulation-targets-list .sim-card.active-card { border-color: var(--bridgestone-red); box-shadow: 0 4px 16px rgba(218, 41, 28, 0.2); background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); } #simulation-targets-list .sim-card-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; color: #2c3e50; } #simulation-targets-list .sim-card-header .sim-card-title { font-size: 0.95em; flex-grow: 1; padding-right: 10px; } #simulation-targets-list .sim-card-header .sim-card-remove-btn { padding: 4px 8px; font-size: 1.1em; line-height: 1; color: #dc3545; border: 1px solid transparent; background-color: transparent; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; } #simulation-targets-list .sim-card-header .sim-card-remove-btn:hover { border-color: #dc3545; background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); } /* Nowoczesne style dla panelu tutorial */ #tutorial-panel { width: 400px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 25px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #tutorial-panel::-webkit-scrollbar { width: 8px; } #tutorial-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } #tutorial-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } #tutorial-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } #tutorial-panel h3 { margin-top: 0; margin-bottom: 25px; border-bottom: 3px solid var(--bridgestone-red); padding-bottom: 15px; font-size: 1.4em; font-weight: 700; color: #2c3e50; position: relative; } #tutorial-panel h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #tutorial-panel h4 { margin-top: 25px; margin-bottom: 12px; color: var(--bridgestone-red); border-bottom: 2px solid rgba(218, 41, 28, 0.2); padding-bottom: 8px; font-size: 1.1em; font-weight: 600; position: relative; } #tutorial-panel h4::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #tutorial-panel p, #tutorial-panel li { font-size: 0.95em; line-height: 1.7; margin-bottom: 12px; color: #495057; } #tutorial-panel ul { padding-left: 25px; list-style-type: none; } #tutorial-panel ul li { position: relative; margin-bottom: 8px; } #tutorial-panel ul li::before { content: '▶'; position: absolute; left: -20px; color: var(--bridgestone-red); font-size: 0.8em; top: 2px; } #tutorial-panel ol { padding-left: 25px; } #tutorial-panel ol li { margin-bottom: 8px; position: relative; } #tutorial-panel ol li::marker { color: var(--bridgestone-red); font-weight: 600; } #tutorial-panel .code-like { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 4px 8px; border-radius: 6px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; color: var(--bridgestone-red-darker); font-weight: 600; border: 1px solid rgba(218, 41, 28, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #tutorial-panel strong { color: #2c3e50; font-weight: 600; } #tutorial-panel .close-panel-button { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); border: none; font-size: 1.8em; cursor: pointer; line-height: 1; width: 45px; height: 45px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(238, 90, 82, 0.3); z-index: 1001; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0; margin: 0; min-width: 45px; min-height: 45px; pointer-events: auto; } #tutorial-panel .close-panel-button:hover { background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%); transform: scale(1.1); box-shadow: 0 4px 12px rgba(238, 90, 82, 0.4); } #tutorial-panel .close-panel-button:active { transform: scale(0.95); } #tutorial-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } #converter-panel pre { background-color: #eee; padding: 10px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; max-height: 200px; overflow-y: auto; font-size: 0.8em; margin-top: 10px; } /* Pozostałe style specjalne dla simulation-panel */ .simulation-type-selector-group { display: flex; justify-content: space-around; margin-bottom: 15px; gap: 8px; } .simulation-type-button { padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); cursor: pointer; font-size: 0.9em; flex-grow: 1; text-align: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); font-weight: 500; color: #495057; } .simulation-type-button.active { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; border-color: var(--bridgestone-red); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } .simulation-type-button:hover:not(.active) { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .simulation-scenario-management { margin-top: 20px; padding-top: 15px; border-top: 2px solid rgba(218, 41, 28, 0.2); } .simulation-scenario-management label { font-size: 0.95em; display: block; margin-bottom: 8px; color: #495057; font-weight: 500; } .simulation-scenario-management select { width: calc(100% - 110px); margin-right: 10px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); font-size: 0.9em; color: #495057; } .simulation-scenario-management button { width: auto; padding: 8px 12px; font-size: 0.9em; margin-left: 5px; } #simulation-impact-info h4 { margin-top: 20px; margin-bottom: 12px; font-size: 1.1em; border-top: 2px solid rgba(218, 41, 28, 0.2); padding-top: 15px; color: var(--bridgestone-red); font-weight: 600; } #simulation-impact-list { list-style-type: none; padding-left: 0; font-size: 0.9em; max-height: 180px; overflow-y: auto; } #simulation-impact-list li { margin-bottom: 8px; padding: 8px 12px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 6px; border-left: 3px solid var(--bridgestone-red); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #dynamic-fields-container { margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 15px; } .page-footer { text-align: center; margin-top: 25px; padding: 10px; padding-top: 15px; font-size: 0.8em; color: #333; border-top: 1px solid var(--bridgestone-red); } body.presentation-mode { padding: 0; overflow: hidden; } body.presentation-mode .top-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1001; padding: 5px 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); justify-content: space-between; } body.presentation-mode .main-controls { background-color: transparent; box-shadow: none; padding: 0; flex-grow: 0; order: 1; } body.presentation-mode .menu-container { display: none !important; } body.presentation-mode #toggle-presentation-mode-button { display: inline-block !important; } body.presentation-mode #search-process-input { display: inline-block !important; } body.presentation-mode #reset-button { display: inline-block !important; } body.presentation-mode #shortcut-show-dependencies-button, body.presentation-mode #shortcut-simulate-impact-button { display: inline-block !important; } body.presentation-mode #toggle-filter-panel-button { display: inline-block !important; margin-left: 10px !important; order: 0 !important; } body.presentation-mode #toggle-mini-map-button { display: inline-block !important; order: 2; margin-left: auto; } body.presentation-mode #diagram-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding-top: 45px; box-sizing: border-box; border: none; margin: 0; } body.presentation-mode .colors-toggle-bar, body.presentation-mode .visual-controls, body.presentation-mode #process-details, body.presentation-mode #converter-panel, body.presentation-mode #simulation-panel, body.presentation-mode #tutorial-panel, body.presentation-mode .modal, body.presentation-mode .page-footer, body.presentation-mode #link-handle-trigger, body.presentation-mode .unlink-handle, body.presentation-mode #dependency-panel-container { display: none !important; } #mini-map-wrapper { position: fixed; top: 55px; right: 10px; width: 180px; height: 135px; border: 1px solid #999; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 990; overflow: hidden; display: none; } #mini-map-svg { width: 100%; height: 100%; display: block; } #mini-map-viewport-rect { fill: rgba(0, 100, 255, 0.2); stroke: rgba(0, 100, 255, 0.8); stroke-width: 1px; } .mini-map-node { stroke: #777; stroke-width: 0.5px; } /* === NOWOCZESNE STYLE DLA PANELU DEPENDENCIES === */ #dependency-panel-container { position: fixed; top: 60px; width: 50vw; min-width: 450px; max-width: 900px; right: -50vw; display: flex; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: calc(100vh - 80px); background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); border-left: 3px solid var(--bridgestone-red); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15), -4px 0 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 0; box-sizing: border-box; overflow: hidden; z-index: 998; flex-direction: column; } #dependency-panel-container.visible { right: 0; display: flex; } #dependency-panel-title-bar { padding: 20px 25px; border-bottom: 3px solid rgba(218, 41, 28, 0.2); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); position: relative; } #dependency-panel-title-bar::after { content: ''; position: absolute; bottom: -3px; left: 25px; width: 60px; height: 3px; background: linear-gradient(90deg, var(--bridgestone-red), transparent); } #dependency-panel-title-bar h3 { margin: 0; font-size: 1.3em; font-weight: 600; color: #2c3e50; flex-grow: 1; } #highlight-tree-nodes-button { padding: 10px 16px; font-size: 0.9em; margin-left: 15px; background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } #highlight-tree-nodes-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } .close-dependency-panel-button { font-size: 1.8em; border: none; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; cursor: pointer; line-height: 1; margin-left: 15px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(238, 90, 82, 0.3); } .close-dependency-panel-button:hover { background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%); transform: scale(1.1); box-shadow: 0 4px 12px rgba(238, 90, 82, 0.4); } .close-dependency-panel-button:active { transform: scale(0.95); } #dependency-tree-content { flex-grow: 1; overflow: auto; padding: 25px; background: linear-gradient(135deg, #fdfdfd 0%, #f8f9fa 100%); } #dependency-tree-content::-webkit-scrollbar { width: 8px; height: 8px; } #dependency-tree-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } #dependency-tree-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } #dependency-tree-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } #dependency-tree-svg { display: block; min-width: 100%; } /* Nowoczesne style dla węzłów drzewa zależności */ .dep-tree-node rect { fill: #ffffff; stroke: var(--bridgestone-red); stroke-width: 2px; rx: 6; ry: 6; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .dep-tree-node.selected-root rect { fill: #fff5f5; stroke: var(--bridgestone-red-darker); stroke-width: 3px; filter: drop-shadow(0 4px 8px rgba(218, 41, 28, 0.2)); } .dep-tree-node.not-in-view rect { fill: #e9ecef; stroke: #adb5bd; stroke-dasharray: 4,4; opacity: 0.8; } .dep-tree-node text { font-size: 10px; text-anchor: middle; dominant-baseline: middle; fill: #212529; pointer-events: none; font-weight: 600; } .dep-tree-node text.toggle-text { font-size: 13px; text-anchor: start; cursor: pointer; fill: #343a40; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .dep-tree-node text.toggle-text:hover { fill: var(--bridgestone-red); transform: scale(1.05); } .dep-tree-link { stroke: #495057; stroke-width: 2px; fill: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .dep-tree-node.clickable { cursor: pointer; } .dep-tree-node.clickable:hover rect { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) brightness(102%); transform: scale(1.02); } /* Hover effect for dark mode */ body.dark-mode .dep-tree-node.clickable:hover rect { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) brightness(110%); transform: scale(1.02); } .dep-tree-node.path-highlight rect { fill: #fef5e7; stroke: #d69e2e; stroke-width: 3px; filter: drop-shadow(0 4px 8px rgba(214, 158, 46, 0.3)); } .dep-tree-link.path-highlight { stroke: #d69e2e; stroke-width: 3px; filter: drop-shadow(0 1px 3px rgba(214, 158, 46, 0.3)); } /* Kolory dla różnych typów procesów w dependency tree są teraz ustawiane dynamicznie w JavaScript */ /* Style dla przycisku show dependencies w menu */ #menu-dependency-panel-trigger.disabled { opacity: 0.5; cursor: not-allowed; background-color: #e9ecef !important; color: #6c757d !important; } #menu-dependency-panel-trigger.disabled:hover { background-color: #e9ecef !important; transform: none !important; box-shadow: none !important; } #menu-dependency-panel-trigger svg { vertical-align: middle; margin-right: 5px; } #link-handle-trigger, .unlink-handle { position: absolute; width: 14px; height: 14px; color: white; border-radius: 50%; display: none; justify-content: center; align-items: center; font-size: 10px; font-weight: bold; z-index: 15; user-select: none; line-height: 14px; } #link-handle-trigger { background-color: #28a745; cursor: grab; } #link-handle-trigger:hover { background-color: #218838; } .unlink-handle { background-color: #f44336; cursor: pointer; } .unlink-handle:hover { background-color: #d32f2f; } .temp-link-line { stroke: #28a745; stroke-width: 2.5px; stroke-dasharray: 5,5; pointer-events: none; /* <-- TO JEST KLUCZOWA DODANA WŁAŚCIWOŚĆ */ } .process-node.link-target-hover { outline: 2px dashed #28a745; outline-offset: 2px; } #toggle-mini-map-button:hover { background-color: #ddd; } .modal-content { border-top: 4px solid var(--bridgestone-red); } .page-footer { display: flex; align-items: center; justify-content: center; } .bridgestone-footer-symbol { width: 18px; height: 18px; margin-right: 10px; fill: var(--bridgestone-red); } .context-menu { display: none; position: absolute; z-index: 1010; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); padding: 5px 0; min-width: 150px; } .context-menu-item { padding: 8px 12px; font-size: 0.9em; cursor: pointer; } .context-menu-item:hover { background-color: #f0f0f0; } #notification-bar { display: none; position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 10px 15px; text-align: center; z-index: 2000; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 0.9em; line-height: 1.4; box-sizing: border-box; } #notification-message { display: inline-block; max-width: calc(100% - 50px); text-align: left; vertical-align: middle; } #notification-message pre { white-space: pre-wrap; word-wrap: break-word; background-color: rgba(0,0,0,0.1); padding: 5px; border-radius: 3px; margin-top: 5px; font-size: 0.95em; max-height: 100px; overflow-y: auto; } /* === NOWOCZESNY STYL DLA NOTIFICATION CLOSE BUTTON === */ #notification-close { float: right; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: white; font-size: 1.2em; font-weight: bold; cursor: pointer; line-height: 1; padding: 8px 10px; margin-left: 15px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } #notification-close:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } #notification-close:active { transform: scale(1.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* Style dla resizer dependency panel */ #dependency-panel-resizer { position: absolute; left: 0; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 1000; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(90deg, transparent 0%, rgba(218, 41, 28, 0.1) 50%, transparent 100%); } #dependency-panel-resizer:hover { background: linear-gradient(90deg, transparent 0%, rgba(218, 41, 28, 0.3) 50%, transparent 100%); box-shadow: inset -2px 0 4px rgba(218, 41, 28, 0.2); } /* === POCZĄTEK NOWEGO, POPRAWIONEGO BLOKU CSS DLA KART SYMULACJI === */ #simulation-targets-list .sim-card { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; transition: all 0.2s ease-in-out; } #simulation-targets-list .sim-card.active-card { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); background-color: #fff; } #simulation-targets-list .sim-card-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: bold; } #simulation-targets-list .sim-card-header .sim-card-title { font-size: 0.95em; flex-grow: 1; padding-right: 10px; } #simulation-targets-list .sim-card-header .sim-card-remove-btn { padding: 2px 6px; font-size: 1.2em; line-height: 1; color: #dc3545; border: 1px solid transparent; background-color: transparent; cursor: pointer; border-radius: 3px; } #simulation-targets-list .sim-card-header .sim-card-remove-btn:hover { border-color: #dc3545; background-color: #f8d7da; } /* KLUCZOWE STYLE DO POKAZYWANIA KONTROLEK */ #simulation-targets-list .sim-card-controls { display: none; /* Domyślnie ukryte */ padding-top: 10px; margin-top: 10px; border-top: 1px dashed #ccc; } .sim-card.active-card .sim-card-controls { display: block; /* Pokazywane dla aktywnej karty */ } .sim-card-controls .sim-type-group { display: flex; gap: 5px; margin-bottom: 10px; } /* === NOWOCZESNE STYLE DLA SIM-CARD CONTROLS BUTTONS === */ .sim-card-controls .sim-type-group button { flex-grow: 1; padding: 8px 12px; font-size: 0.85em; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer; border-radius: 6px; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .sim-card-controls .sim-type-group button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .sim-card-controls .sim-type-group button:hover::before { left: 100%; } .sim-card-controls .sim-type-group button:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .sim-card-controls .sim-type-group button.active { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border-color: #0056b3; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); transform: none; } .sim-card-controls .sim-type-group button.active:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); } .sim-card-controls .sim-param-group label { font-size: 0.85em; margin-bottom: 3px; display: block; color: #333; } .sim-card-controls .sim-param-group input { width: 100%; padding: 6px; font-size: 0.9em; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; } #simulation-targets-list .sim-card { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; transition: all 0.2s ease-in-out; } /* Styl dla aktywnej (rozwiniętej) karty */ #simulation-targets-list .sim-card.active-card { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); background-color: #fff; } /* Nagłówek karty (zawsze widoczny) */ #simulation-targets-list .sim-card-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: bold; } #simulation-targets-list .sim-card-header .sim-card-title { font-size: 0.95em; flex-grow: 1; padding-right: 10px; } /* Przycisk usuwania procesu z symulacji */ #simulation-targets-list .sim-card-header .sim-card-remove-btn { padding: 2px 6px; font-size: 1.2em; line-height: 1; color: #dc3545; border: 1px solid transparent; background-color: transparent; cursor: pointer; border-radius: 3px; } #simulation-targets-list .sim-card-header .sim-card-remove-btn:hover { border-color: #dc3545; background-color: #f8d7da; } /* Kontener na kontrolki (przyciski i pola input), DOMYŚLNIE UKRYTY */ #simulation-targets-list .sim-card-controls { display: none; padding-top: 10px; margin-top: 10px; border-top: 1px dashed #ccc; } /* KLUCZOWA REGUŁA: Pokaż kontrolki, gdy karta ma klasę .active-card */ #simulation-targets-list .sim-card.active-card .sim-card-controls { display: block; } /* Kontener na przyciski "Shift" / "Remove" */ .sim-card-controls .sim-type-group { display: flex; gap: 5px; margin-bottom: 10px; } .sim-card-controls .sim-type-group button { flex-grow: 1; padding: 8px 12px; font-size: 0.85em; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer; border-radius: 6px; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .sim-card-controls .sim-type-group button.active { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border-color: #0056b3; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); transform: none; } /* Kontener na pola do edycji WD i czasu */ .sim-card-controls .sim-param-group label { font-size: 0.85em; margin-bottom: 3px; display: block; color: #333; } .sim-card-controls .sim-param-group input { width: 100%; padding: 6px; font-size: 0.9em; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; } /* START NOWYCH STYLI DLA GÓRNEGO PASKA I DOLNEGO PANELU */ .visual-shortcut-buttons { display: flex; align-items: center; gap: 5px; /* Dodaje odstęp między ikonami */ } /* === NOWOCZESNE STYLE DLA VISUAL SHORTCUT BUTTONS === */ .visual-shortcut-buttons button { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 14px; font-weight: 500; font-size: 0.9em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .visual-shortcut-buttons button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .visual-shortcut-buttons button:hover::before { left: 100%; } .visual-shortcut-buttons button:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .visual-shortcut-buttons button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } #theme-toggle-button .sun-icon, #theme-toggle-button .moon-icon { vertical-align: middle; } body:not(.dark-mode) #theme-toggle-button .moon-icon { display: none; } body.dark-mode #theme-toggle-button .sun-icon { display: none; } /* Ukrycie starego panelu, ponieważ został usunięty z HTML */ .colors-toggle-bar { display: none !important; } /* Usunięcie przycisków Reset/Generate z manualnego panelu kolorów */ #reset-colors-button, #generate-theme-button { display: none !important; } /* === STYLE DLA MENU SUBSECTIONS === */ .menu-subsection { margin-bottom: 8px; } .menu-subsection-header { width: 100%; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; padding: 10px 12px; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .menu-subsection-header::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .menu-subsection-header:hover::before { left: 100%; } .menu-subsection-header:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .menu-arrow { font-size: 0.8em; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .menu-subsection-header.expanded .menu-arrow { transform: rotate(180deg); } .menu-subsection-content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 0 0 6px 6px; margin-top: 2px; } .menu-subsection-content.expanded { max-height: 300px; border: 1px solid rgba(0, 0, 0, 0.05); border-top: none; padding: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03); } .menu-subsection-content button, .menu-subsection-content label { margin-bottom: 6px; width: 100%; font-size: 0.85em; } .menu-subsection-content button:last-child, .menu-subsection-content label:last-child { margin-bottom: 0; } /* Dark mode styles for subsections */ body.dark-mode .menu-subsection-header { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .menu-subsection-header:hover { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border-color: rgba(218, 41, 28, 0.5); } body.dark-mode .menu-subsection-content { background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); } body.dark-mode .menu-subsection-content.expanded { border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; } /* === STYLE DLA LOAD JSON SECTION === */ .load-json-section { text-align: center; padding: 12px 8px; margin: 8px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 6px; } .load-json-section label { display: block; margin-bottom: 8px; text-align: center; } body.dark-mode .load-json-section { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); border: 1px solid rgba(255, 255, 255, 0.1); } /* === STYLE DLA LOAD EXCEL SECTION === */ .load-excel-section { padding: 12px; margin: 8px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .excel-file-browser { margin-bottom: 12px; padding: 8px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; } .excel-file-label { display: inline-block; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; padding: 8px 16px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.85em; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; } .excel-file-label::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .excel-file-label:hover::before { left: 100%; } .excel-file-label:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } #excel-file-input { display: none; } .file-name-display { display: block; margin-top: 6px; font-size: 0.75em; color: #6c757d; font-style: italic; } .excel-action-button { width: 100%; margin-bottom: 8px; padding: 10px 16px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; font-weight: 500; font-size: 0.85em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .excel-action-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .excel-action-button:hover::before { left: 100%; } .excel-action-button:hover:not(:disabled) { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .excel-action-button:disabled { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); color: #6c757d; cursor: not-allowed; opacity: 0.6; } .excel-converters { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(0, 0, 0, 0.1); } .json-preview-container { margin-top: 12px; padding: 10px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 6px; } .json-preview-container h6 { margin: 0 0 8px 0; font-size: 0.8em; font-weight: 600; color: #495057; } .json-preview-content { max-height: 120px; overflow-y: auto; padding: 8px; background: #f8f9fa; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.7em; color: #495057; white-space: pre-wrap; margin-bottom: 8px; } /* === DARK MODE DLA LOAD EXCEL === */ body.dark-mode .load-excel-section { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .excel-file-browser { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .excel-file-label { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .excel-file-label:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); } body.dark-mode .file-name-display { color: #cbd5e0; } body.dark-mode .excel-action-button { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .excel-action-button:hover:not(:disabled) { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); } body.dark-mode .excel-action-button:disabled { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: #9ca3af; } body.dark-mode .json-preview-container { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .json-preview-container h6 { color: #e2e8f0; } body.dark-mode .json-preview-content { background: #1a202c; border: 1px solid rgba(255, 255, 255, 0.1); color: #e2e8f0; } /* === NOWOCZESNE STYLE DLA CONTEXT MENU === */ .context-menu { display: none; position: absolute; z-index: 1010; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); padding: 8px; min-width: 180px; animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .context-menu-item { padding: 10px 14px; font-size: 0.9em; font-weight: 500; cursor: pointer; display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; border-radius: 6px; color: #2c3e50; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .context-menu-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } .context-menu-item:hover::before { left: 100%; } .context-menu-item:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .context-menu-item:active { transform: translateX(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* === NOWOCZESNE STYLE DLA WYSUWANEGO PANELU PROCESS DETAILS === */ #process-details { position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); backdrop-filter: blur(10px); box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15), 0 -2px 10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.08); z-index: 990; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; max-height: 52px; transform: translateY(100%); } /* Kiedy panel staje się aktywny (wybrano proces), wsuwa się na ekran */ #process-details.active { transform: translateY(0); border-top: 3px solid var(--bridgestone-red); background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2), 0 -4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2); } /* Kiedy jest rozwinięty, zwiększamy jego wysokość */ #process-details.expanded { max-height: 50vh; } #details-header { display: flex; justify-content: space-between; align-items: center; padding: 0 25px; height: 52px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .details-title-container { display: flex; align-items: center; gap: 12px; color: #6c757d; pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .details-icon { color: var(--bridgestone-red); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #process-details.active .details-title-container { color: #2c3e50; } #details-header h3 { margin: 0; font-size: 1.2em; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .details-controls { visibility: hidden; opacity: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #process-details.active .details-controls { visibility: visible; opacity: 1; } #details-toggle-button { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: 500; color: #495057; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #details-toggle-button:hover { background: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } #details-toggle-button .button-text-show, #details-toggle-button .chevron-down { display: inline-block; } #details-toggle-button .button-text-hide, #details-toggle-button .chevron-up { display: none; } #process-details.expanded #details-toggle-button .button-text-show, #process-details.expanded #details-toggle-button .chevron-down { display: none; } #process-details.expanded #details-toggle-button .button-text-hide, #process-details.expanded #details-toggle-button .chevron-up { display: inline-block; } /* Flexbox container dla zawartości i przycisków */ #details-content-container { display: flex; gap: 20px; height: calc(50vh - 52px); padding: 25px; padding-top: 15px; } #details-content-wrapper { flex: 1; overflow-y: auto; padding-right: 15px; } #details-content-wrapper::-webkit-scrollbar { width: 8px; } #details-content-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } #details-content-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } #details-content-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } /* Style dla kontenera przycisków akcji */ #details-action-buttons { width: 180px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(233, 236, 239, 0.8) 100%); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #process-details.expanded #details-action-buttons { opacity: 1; visibility: visible; } #details-action-buttons h4 { margin: 0 0 15px 0; font-size: 1em; font-weight: 600; color: #2c3e50; text-align: center; border-bottom: 2px solid rgba(218, 41, 28, 0.2); padding-bottom: 8px; } #details-content-wrapper p { margin: 8px 0; font-size: 0.95em; line-height: 1.6; color: #495057; } #details-content-wrapper strong { color: #2c3e50; min-width: 150px; display: inline-block; font-weight: 600; } /* Style dla przycisków akcji */ #details-action-buttons button { width: 100%; padding: 12px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; } #details-action-buttons .edit-process-button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } #details-action-buttons .edit-process-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } #details-action-buttons .simulate-impact-button { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%); color: #212529; font-weight: 600; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); } #details-action-buttons .simulate-impact-button:hover { background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4); } /* Zachowanie starych stylów dla przycisków które mogą pozostać w details-content-wrapper */ #details-content-wrapper button { padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; background: linear-gradient(135deg, var(--bridgestone-red) 0%, #e74c3c 100%); color: white; margin-top: 12px; margin-right: 8px; font-size: 0.9em; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.3); } #details-content-wrapper button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #c0392b 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } body { padding-bottom: 20px; /* Zresetuj padding, bo panel jest teraz w przepływie */ } body.dark-mode #dependency-panel-resizer { background: linear-gradient(90deg, transparent 0%, rgba(218, 41, 28, 0.2) 50%, transparent 100%); } body.dark-mode #dependency-panel-resizer:hover { background: linear-gradient(90deg, transparent 0%, rgba(218, 41, 28, 0.4) 50%, transparent 100%); box-shadow: inset -2px 0 4px rgba(218, 41, 28, 0.3); } /* === POCZĄTEK NOWEGO STYLU - ANIMACJA PODŚWIETLENIA === */ @keyframes pulse-highlight { 0% { transform: scale(1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } 50% { transform: scale(1.04); /* Użyjemy koloru "success" dla podświetlenia */ background-color: #d4edda; border-color: #155724; box-shadow: 0 5px 20px rgba(40, 167, 69, 0.4); } 100% { transform: scale(1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } } body.dark-mode @keyframes pulse-highlight { 0% { transform: scale(1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 50% { transform: scale(1.04); /* Ciemniejszy, dopasowany kolor "success" dla dark mode */ background-color: #1c4b27; border-color: #52c467; box-shadow: 0 5px 20px rgba(82, 196, 103, 0.4); } 100% { transform: scale(1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } } .excel-file-label.highlight-pulse { /* Uruchom animację na 2 sekundy, powtórz 2 razy dla lepszego efektu */ animation: pulse-highlight 2s ease-in-out; } /* === KONIEC NOWEGO STYLU === */ body.dark-mode { background-color: #121212; color: #e0e0e0; } body.dark-mode .top-bar { background-color: #1e1e1e; border-bottom: 3px solid var(--bridgestone-red); } body.dark-mode .main-controls { background-color: #2a2a2a; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } body.dark-mode .main-controls button, body.dark-mode .main-controls input[type="search"], body.dark-mode #shortcut-show-dependencies-button, body.dark-mode #shortcut-simulate-impact-button { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .main-controls button:hover:not(:disabled), body.dark-mode .main-controls input[type="search"]:hover, body.dark-mode #shortcut-show-dependencies-button:hover:not(:disabled), body.dark-mode #shortcut-simulate-impact-button:hover:not(:disabled) { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important; border-color: rgba(218, 41, 28, 0.5) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } body.dark-mode #shortcut-show-dependencies-button:disabled, body.dark-mode #shortcut-simulate-impact-button:disabled { background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important; color: #9ca3af !important; opacity: 0.6; } body.dark-mode #shortcut-show-dependencies-button:disabled:hover, body.dark-mode #shortcut-simulate-impact-button:disabled:hover { background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important; } /* === DARK MODE STYLES FOR VISUAL SHORTCUT BUTTONS === */ body.dark-mode .visual-shortcut-buttons button { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .visual-shortcut-buttons button:hover { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important; border-color: rgba(218, 41, 28, 0.5) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } /* === NOWOCZESNE STYLE DLA PRZYCISKÓW FILTERS I MINI-MAP === */ #toggle-filter-panel-button, #toggle-mini-map-button { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 16px; font-weight: 500; font-size: 0.9em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } #toggle-filter-panel-button::before, #toggle-mini-map-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s; } #toggle-filter-panel-button:hover::before, #toggle-mini-map-button:hover::before { left: 100%; } #toggle-filter-panel-button:hover, #toggle-mini-map-button:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: rgba(218, 41, 28, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } #toggle-filter-panel-button:active, #toggle-mini-map-button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Dark mode styles for Filters and Mini-map buttons */ body.dark-mode #toggle-filter-panel-button, body.dark-mode #toggle-mini-map-button { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } body.dark-mode #toggle-filter-panel-button:hover, body.dark-mode #toggle-mini-map-button:hover { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important; border-color: rgba(218, 41, 28, 0.5) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } body.dark-mode #menu-dependency-panel-trigger.disabled { background-color: #4a5568 !important; color: #9ca3af !important; } body.dark-mode #menu-dependency-panel-trigger.disabled:hover { background-color: #4a5568 !important; transform: none !important; box-shadow: none !important; } body.dark-mode #menu-dependency-panel-trigger svg { stroke: #e2e8f0; } body.dark-mode #menu-button { background-color: var(--bridgestone-red); color: white; border: 1px solid var(--bridgestone-red-darker); } body.dark-mode #menu-button:hover { background-color: var(--bridgestone-red-darker); color: white; } body.dark-mode #menu-button svg { fill: white; } body.dark-mode #diagram-container { background-color: #1e1e1e; border-color: var(--bridgestone-red); } body.dark-mode #welcome-message-overlay { background-color: rgba(30, 30, 30, 0.97); color: #e0e0e0; } body.dark-mode #welcome-message-overlay h2 { color: var(--bridgestone-red); } body.dark-mode #welcome-message-overlay strong { color: #f5f5f5; } body.dark-mode #welcome-message-overlay .highlight-path { color: #64b5f6; } body.dark-mode .process-node { background-color: #2c3e50; border-color: #4a657a; color: #e0e0e0; box-shadow: 1px 1px 3px rgba(0,0,0,0.4); } body.dark-mode .process-node.can-hover:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.5); border-color: #608da8; } body.dark-mode .process-node.selected { border-color: var(--bridgestone-red) !important; box-shadow: 0 0 8px var(--bridgestone-red) !important; } /* === DARK MODE DLA STANDARD-BLOCKING - KOLORY USTAWIANE DYNAMICZNIE === */ body.dark-mode .process-node.standard-blocking { /* Kolory tła, obramowania i cienia są ustawiane dynamicznie w JavaScript na podstawie aktualnych wartości configColors.node i configColors.blockingNode */ } body.dark-mode .process-node.search-highlight { background-color: #5c431f !important; border-color: #ff8c00 !important; color: #fff !important; } body.dark-mode .process-node .node-type-symbol { color: #111; background-color: rgba(200, 200, 200, 0.7); } body.dark-mode #dependency-svg line { stroke: #aaa; } body.dark-mode .modal-content { background-color: #2b2b2b; color: #e0e0e0; border: 1px solid #444; border-top: 4px solid var(--bridgestone-red); } body.dark-mode .modal-content h3 { border-bottom: 1px solid #444; } body.dark-mode .modal-content label { color: #ccc; } body.dark-mode .modal-content input[type="text"], body.dark-mode .modal-content input[type="time"], body.dark-mode .modal-content textarea, body.dark-mode .modal-content input[type="number"], body.dark-mode .modal-content select { background-color: #333; color: #e0e0e0; border: 1px solid #555; } body.dark-mode .modal-content input.invalid, body.dark-mode .modal-content textarea.invalid, body.dark-mode .modal-content select.invalid { border-color: #e57373; } body.dark-mode .modal-content .error-message { color: #e57373; } body.dark-mode .modal-content .save-button { background-color: #4CAF50; color: white; } body.dark-mode .modal-content .save-button:hover { background-color: #45a049; } body.dark-mode .modal-content .cancel-button { background-color: #777; color: white; } body.dark-mode .modal-content .cancel-button:hover { background-color: #666; } body.dark-mode .modal-content .delete-button { background-color: #f44336; color: white; } body.dark-mode .modal-content .delete-button:hover { background-color: #e53935; } body.dark-mode #converter-panel { background-color: #252525; color: #e0e0e0; box-shadow: -2px 0 5px rgba(0,0,0,0.3); } body.dark-mode #converter-panel h3 { border-bottom: 1px solid #444; } body.dark-mode #converter-panel input[type="file"] { background-color: #333; color: #e0e0e0; border-color: #555; } body.dark-mode #converter-panel button { background-color: #007bff; color: white; } body.dark-mode #converter-panel button:hover { background-color: #0056b3; } /* === KOMPLETNA STYLIZACJA DARK MODE DLA SIMULATION PANEL === */ body.dark-mode #simulation-panel { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4), -2px 0 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); } body.dark-mode #simulation-panel::-webkit-scrollbar { width: 8px; } body.dark-mode #simulation-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } body.dark-mode #simulation-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.dark-mode #simulation-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } body.dark-mode #simulation-panel h3 { color: #f7fafc; border-bottom: 3px solid var(--bridgestone-red); } body.dark-mode #simulation-panel h3::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.3)); } body.dark-mode #simulation-panel h4 { color: #ffccc7; border-bottom: 2px solid rgba(218, 41, 28, 0.3); } body.dark-mode #simulation-panel h4::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.2)); } body.dark-mode #simulation-panel p, body.dark-mode #simulation-panel li, body.dark-mode #simulation-panel label { color: #cbd5e0; } body.dark-mode #simulation-panel select, body.dark-mode #simulation-panel input[type="text"], body.dark-mode #simulation-panel input[type="number"] { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.dark-mode #simulation-panel select:hover, body.dark-mode #simulation-panel input[type="text"]:hover, body.dark-mode #simulation-panel input[type="number"]:hover { border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } body.dark-mode #simulation-panel select:focus, body.dark-mode #simulation-panel input[type="text"]:focus, body.dark-mode #simulation-panel input[type="number"]:focus { border-color: var(--bridgestone-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.2); } body.dark-mode #simulation-panel button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(218, 41, 28, 0.4); } body.dark-mode #simulation-panel button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #a71005 100%); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.5); } body.dark-mode #simulation-panel .close-panel-button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4); } body.dark-mode #simulation-panel .close-panel-button:hover { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5); } body.dark-mode #simulation-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.3); } /* Stylizacja dark mode dla kart symulacji */ body.dark-mode #simulation-targets-list .sim-card { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode #simulation-targets-list .sim-card.active-card { border-color: var(--bridgestone-red); box-shadow: 0 4px 16px rgba(218, 41, 28, 0.3); background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); } body.dark-mode #simulation-targets-list .sim-card-header { color: #e2e8f0; } body.dark-mode #simulation-targets-list .sim-card-header .sim-card-remove-btn:hover { border-color: #e53e3e; background: linear-gradient(135deg, #5a2d32 0%, #4d1f24 100%); color: #ff7a83; } /* Stylizacja dark mode dla przycisków symulacji */ body.dark-mode .simulation-type-button { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.dark-mode .simulation-type-button.active { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #c53030 100%); border-color: var(--bridgestone-red); box-shadow: 0 2px 8px rgba(218, 41, 28, 0.4); } body.dark-mode .simulation-type-button:hover:not(.active) { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* Stylizacja dark mode dla zarządzania scenariuszami */ body.dark-mode .simulation-scenario-management { border-top: 2px solid rgba(218, 41, 28, 0.3); } body.dark-mode .simulation-scenario-management select { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } /* Stylizacja dark mode dla listy wpływu symulacji */ body.dark-mode #simulation-impact-info h4 { border-top: 2px solid rgba(218, 41, 28, 0.3); color: #ffccc7; } body.dark-mode #simulation-impact-list li { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border-left: 3px solid var(--bridgestone-red); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: #cbd5e0; } /* Stylizacja dark mode dla kontrolek kart symulacji */ body.dark-mode #simulation-targets-list .sim-card-controls { border-top: 1px dashed rgba(218, 41, 28, 0.3); } body.dark-mode .sim-card-controls .sim-param-group label { color: #cbd5e0; } body.dark-mode .sim-card-controls .sim-param-group input { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode .sim-card-controls .sim-param-group input:hover { border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } body.dark-mode .sim-card-controls .sim-param-group input:focus { border-color: var(--bridgestone-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.2); } /* === KOMPLETNA STYLIZACJA DARK MODE DLA FILTER PANEL === */ body.dark-mode #filter-panel { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4), -2px 0 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); } body.dark-mode #filter-panel::-webkit-scrollbar { width: 8px; } body.dark-mode #filter-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } body.dark-mode #filter-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.dark-mode #filter-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } body.dark-mode #filter-panel h3 { color: #f7fafc; border-bottom: 3px solid var(--bridgestone-red); } body.dark-mode #filter-panel h3::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.3)); } body.dark-mode #filter-panel h4 { color: #ffccc7; border-bottom: 2px solid rgba(218, 41, 28, 0.3); } body.dark-mode #filter-panel h4::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.2)); } body.dark-mode #filter-panel p, body.dark-mode #filter-panel li, body.dark-mode #filter-panel label { color: #cbd5e0; } body.dark-mode #filter-panel select, body.dark-mode #filter-panel input[type="time"], body.dark-mode #filter-panel input[type="text"] { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.dark-mode #filter-panel select:hover, body.dark-mode #filter-panel input[type="time"]:hover, body.dark-mode #filter-panel input[type="text"]:hover { border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } body.dark-mode #filter-panel select:focus, body.dark-mode #filter-panel input[type="time"]:focus, body.dark-mode #filter-panel input[type="text"]:focus { border-color: var(--bridgestone-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.2); } body.dark-mode #filter-panel .close-panel-button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4); } body.dark-mode #filter-panel .close-panel-button:hover { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5); } body.dark-mode #filter-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.3); } body.dark-mode #apply-filters-button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #c53030 100%); color: white; box-shadow: 0 4px 12px rgba(218, 41, 28, 0.4); } body.dark-mode #apply-filters-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #a71005 100%); box-shadow: 0 6px 20px rgba(218, 41, 28, 0.5); } body.dark-mode #converter-panel .warning { color: #ffe082; background-color: #4e4010; border: 1px solid #a1883b; } body.dark-mode #converter-status pre, body.dark-mode #converter-panel pre { background-color: #1c1c1c; border: 1px solid #444; color: #ccc; } /* UWAGA: Stare style dark mode dla process-details zostały zastąpione nowoczesnymi stylami poniżej */ body.dark-mode .colors-toggle-bar, body.dark-mode .visual-controls { background-color: #2a2a2a; color: #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } body.dark-mode #toggle-colors-button { background-color: #333; color: #e0e0e0; border-color: #555; } body.dark-mode #toggle-colors-button:hover { background-color: #444; } /* ZAKTUALIZUJ TE SELEKTORY */ body.dark-mode #reset-colors-button, body.dark-mode #generate-theme-button { background-color: #333; color: #e0e0e0; border-color: #555; } body.dark-mode #reset-colors-button:hover, body.dark-mode #generate-theme-button:hover { background-color: #444; } body.dark-mode .visual-controls input[type="color"] { border-color: #555; } body.dark-mode #sticky-y-axis, body.dark-mode #sticky-x-axis { background-color: rgba(30, 30, 30, 0.92); border-color: #444; } body.dark-mode #sticky-y-axis .axis, body.dark-mode #sticky-x-axis .axis { background-color: rgba(50,50,50,0.8); border-color: #333; color: #ccc; } body.dark-mode #sticky-y-axis .axis:hover, body.dark-mode #sticky-x-axis .axis:hover { background-color: #404040; border-color: #555; } body.dark-mode #sticky-y-axis .axis.active-axis-filter, body.dark-mode #sticky-x-axis .axis.active-axis-filter { background-color: #004c8c; border-color: #007bff; color: #fff; } body.dark-mode .page-footer { color: #aaa; border-top: 1px solid var(--bridgestone-red); } body.dark-mode .bridgestone-footer-symbol { fill: var(--bridgestone-red); } body.dark-mode #notification-bar { background-color: #424242; color: #e0e0e0; } body.dark-mode #notification-bar[style*="var(--bridgestone-red)"], body.dark-mode #notification-bar[style*="#DA291C"] { background-color: var(--bridgestone-red); color: white; } body.dark-mode #notification-bar[style*="#ffc107"] { background-color: #4e4010; color: #ffe082; } body.dark-mode #notification-bar[style*="#28a745"] { background-color: #1a5c2d; color: #c8e6c9; } body.dark-mode #notification-message pre { background-color: rgba(0,0,0,0.2); color: #f0f0f0; } body.dark-mode #notification-close { color: #e0e0e0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #notification-close:hover { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%); border-color: rgba(255, 255, 255, 0.2); } /* === DARK MODE STYLES FOR SIM-CARD CONTROLS === */ body.dark-mode .sim-card-controls .sim-type-group button { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } body.dark-mode .sim-card-controls .sim-type-group button:hover { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } body.dark-mode .sim-card-controls .sim-type-group button.active { background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); color: white; border-color: #2c5aa0; box-shadow: 0 4px 12px rgba(49, 130, 206, 0.4); } body.dark-mode .sim-card-controls .sim-type-group button.active:hover { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); box-shadow: 0 6px 16px rgba(49, 130, 206, 0.5); } body.dark-mode #menu-content, body.dark-mode #sheet-multi-select-dropdown, body.dark-mode #delete-view-config-dropdown, body.dark-mode .context-menu { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #menu-content button, body.dark-mode #menu-content .menu-item-group select { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #menu-content button:hover, body.dark-mode #menu-content .menu-item-group select:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } body.dark-mode #menu-content label#json-file-input-label { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } body.dark-mode #menu-content label#json-file-input-label:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%) !important; border-color: rgba(218, 41, 28, 0.5) !important; } body.dark-mode #sheet-multi-select-options label:hover, body.dark-mode .context-menu-item:hover, body.dark-mode #delete-view-config-dropdown .delete-item:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); color: #f7fafc; border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } body.dark-mode .context-menu-item { color: #e2e8f0; } body.dark-mode #menu-content h4 { color: #f7fafc; border-bottom-color: rgba(218, 41, 28, 0.3); } body.dark-mode #menu-content h4::after { background: linear-gradient(90deg, var(--bridgestone-red), transparent); } body.dark-mode #menu-content hr { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); } body.dark-mode .menu-item-group { background: rgba(45, 55, 72, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); } body.dark-mode .menu-item-group .delete-view-config-container button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; } body.dark-mode .menu-item-group .delete-view-config-container button:hover { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); } body.dark-mode #menu-content .sheet-multi-select-container button { background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); } body.dark-mode #menu-content .sheet-multi-select-container button:hover { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); } body.dark-mode #delete-view-config-dropdown .delete-item:hover { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; } /* === KOMPLETNA STYLIZACJA DARK MODE DLA DEPENDENCY PANEL === */ body.dark-mode #dependency-panel-container { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--bridgestone-red); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4), -4px 0 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); } body.dark-mode #dependency-panel-title-bar { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border-bottom: 3px solid rgba(218, 41, 28, 0.3); color: #e2e8f0; } body.dark-mode #dependency-panel-title-bar::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.3)); } body.dark-mode #dependency-panel-title-bar h3 { color: #f7fafc; } body.dark-mode #highlight-tree-nodes-button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(218, 41, 28, 0.4); } body.dark-mode #highlight-tree-nodes-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #a71005 100%); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.5); } body.dark-mode .close-dependency-panel-button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4); } body.dark-mode .close-dependency-panel-button:hover { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5); } body.dark-mode #dependency-tree-content { background: linear-gradient(135deg, #2c2c2c 0%, #1a202c 100%); } body.dark-mode #dependency-tree-content::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode #dependency-tree-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } body.dark-mode #dependency-tree-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.dark-mode #dependency-tree-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* === ULEPSZONY DARK MODE DLA DEPENDENCY TREE NODES === */ body.dark-mode .dep-tree-node rect { fill: #4a5568; stroke: var(--bridgestone-red); stroke-width: 2px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } body.dark-mode .dep-tree-node.selected-root rect { fill: #8b5a5a; stroke: #ff8a8a; stroke-width: 3px; filter: drop-shadow(0 4px 8px rgba(255, 138, 138, 0.4)); } body.dark-mode .dep-tree-node.not-in-view rect { fill: #64748b; stroke: #94a3b8; stroke-dasharray: 4,4; opacity: 0.6; } body.dark-mode .dep-tree-node text { fill: #e2e8f0; font-weight: 500; } body.dark-mode .dep-tree-node text.toggle-text { fill: #cbd5e0; font-weight: 600; } body.dark-mode .dep-tree-node text.toggle-text:hover { fill: #ffccc7; } body.dark-mode .dep-tree-link { stroke: #cbd5e0; stroke-width: 2px; } body.dark-mode .dep-tree-node.path-highlight rect { fill: #b7791f; stroke: #ecc94b; stroke-width: 3px; filter: drop-shadow(0 4px 8px rgba(236, 201, 75, 0.4)); } body.dark-mode .dep-tree-link.path-highlight { stroke: #ecc94b; stroke-width: 3px; filter: drop-shadow(0 1px 3px rgba(236, 201, 75, 0.4)); } /* Kolory dla różnych typów procesów w dependency tree (dark mode) są teraz ustawiane dynamicznie w JavaScript */ body.dark-mode .process-node.simulation-target-node { box-shadow: 0 0 8px 2px gold !important; } body.dark-mode .process-node.simulation-new-node { border: 2px dashed #17a2b8 !important; background-color: #1a3f45 !important; } body.dark-mode .process-node.simulation-new-node::after { color: #17a2b8; } body.dark-mode .process-node.simulation-removed { border-color: #dc3545 !important; background-color: #5a2d32 !important; } body.dark-mode .process-node.simulation-removed::after { color: #dc3545; } /* --- NOWE, SZCZEGÓŁOWE STYLE (TRYB CIEMNY) --- */ /* Wejście z problemem (jasnoczerwony w ciemnym trybie) */ body.dark-mode .process-node.simulation-input-conflict { background-color: #5a2d32 !important; border: 2px solid #ff7a83 !important; } /* Wyjście z problemem (ciemnoczerwony w ciemnym trybie) */ body.dark-mode .process-node.simulation-output-at-risk { background-color: #4d1f24 !important; border: 2px solid #ff4f5a !important; } /* Poprawne wejście w symulacji (jasnozielony w ciemnym trybie) */ body.dark-mode .process-node.simulation-ok-input { background-color: #1c4b27 !important; border: 2px solid #52c467 !important; } /* Poprawne wyjście w symulacji (ciemnozielony w ciemnym trybie) */ body.dark-mode .process-node.simulation-ok-output { background-color: #113118 !important; border: 2px solid #3fa551 !important; } body.dark-mode .simulation-ghost-node { border-color: #555 !important; background-color: rgba(44, 62, 80, 0.3) !important; } body.dark-mode #mini-map-wrapper { border: 1px solid #555; background-color: rgba(40, 40, 40, 0.9); box-shadow: 0 0 10px rgba(0,0,0,0.4); } body.dark-mode #mini-map-viewport-rect { fill: rgba(0, 100, 255, 0.3); stroke: rgba(0, 100, 255, 0.9); } body.dark-mode .mini-map-node { stroke: #555; } /* === KOMPLETNA STYLIZACJA DARK MODE DLA TUTORIAL PANEL === */ body.dark-mode #tutorial-panel { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4), -2px 0 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); } body.dark-mode #tutorial-panel::-webkit-scrollbar { width: 8px; } body.dark-mode #tutorial-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } body.dark-mode #tutorial-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.dark-mode #tutorial-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } body.dark-mode #tutorial-panel h3 { color: #f7fafc; border-bottom: 3px solid var(--bridgestone-red); background: linear-gradient(90deg, var(--bridgestone-red) 0%, transparent 50%); background-clip: text; -webkit-background-clip: text; } body.dark-mode #tutorial-panel h3::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.3)); } body.dark-mode #tutorial-panel h4 { color: #ffccc7; border-bottom: 2px solid rgba(218, 41, 28, 0.3); } body.dark-mode #tutorial-panel h4::after { background: linear-gradient(90deg, var(--bridgestone-red), rgba(218, 41, 28, 0.2)); } body.dark-mode #tutorial-panel p, body.dark-mode #tutorial-panel li { color: #cbd5e0; } body.dark-mode #tutorial-panel ul li::before { color: #ffccc7; } body.dark-mode #tutorial-panel ol li::marker { color: #ffccc7; } body.dark-mode #tutorial-panel .code-like { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #ffccc7; border: 1px solid rgba(218, 41, 28, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.dark-mode #tutorial-panel strong { color: #f7fafc; } body.dark-mode #tutorial-panel .close-panel-button { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4); } body.dark-mode #tutorial-panel .close-panel-button:hover { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5); } body.dark-mode #tutorial-panel .close-panel-button:focus { outline: 2px solid rgba(255, 255, 255, 0.3); } body.dark-mode.presentation-mode .top-bar { background-color: #121212; } body.dark-mode.presentation-mode #diagram-container { background-color: #121212; } /* START NOWYCH STYLI DLA TRYBU CIEMNEGO */ body.dark-mode #process-details { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #process-details.active { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-top-color: var(--bridgestone-red); } body.dark-mode .details-title-container { color: #adb5bd; } body.dark-mode #process-details.active .details-title-container { color: #e0e0e0; } body.dark-mode #details-header h3 { color: inherit; } body.dark-mode #details-toggle-button { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #details-toggle-button:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Dark mode styles dla nowego layoutu */ body.dark-mode #details-content-container { background: transparent; } body.dark-mode #details-content-wrapper { color: #e0e0e0; } body.dark-mode #details-content-wrapper strong { color: #f5f5f5; } body.dark-mode #details-action-buttons { background: linear-gradient(135deg, rgba(45, 55, 72, 0.8) 0%, rgba(26, 32, 44, 0.8) 100%); border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #details-action-buttons h4 { color: #ffccc7; border-bottom-color: rgba(218, 41, 28, 0.3); } body.dark-mode #details-action-buttons .edit-process-button { background: linear-gradient(135deg, var(--bridgestone-red) 0%, #c53030 100%); color: white; box-shadow: 0 2px 8px rgba(218, 41, 28, 0.4); } body.dark-mode #details-action-buttons .edit-process-button:hover { background: linear-gradient(135deg, var(--bridgestone-red-darker) 0%, #a71005 100%); box-shadow: 0 4px 12px rgba(218, 41, 28, 0.5); } body.dark-mode #details-action-buttons .simulate-impact-button { background: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%); color: #212529; font-weight: 600; box-shadow: 0 2px 8px rgba(214, 158, 46, 0.4); } body.dark-mode #details-action-buttons .simulate-impact-button:hover { background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%); box-shadow: 0 4px 12px rgba(214, 158, 46, 0.5); } /* Zachowanie starych stylów dla kompatybilności */ body.dark-mode #details-content-wrapper button { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); } body.dark-mode #details-content-wrapper button:hover { background: linear-gradient(135deg, #5a6c7d 0%, #3a4a5d 100%); border-color: rgba(218, 41, 28, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Responsive design dla mniejszych ekranów */ @media screen and (max-width: 768px) { #details-content-container { flex-direction: column; } #details-action-buttons { width: 100%; flex-direction: row; padding: 15px; } #details-action-buttons h4 { display: none; } }

Welcome to the Interactive Process Diagram!

To get started and visualize your processes, please load your data.

Recommended method:

  1. Go to Menu > Load > Load from SharePoint to download the latest process file.
  2. After the file is downloaded, return to the diagram and go to Menu > Load > Load Excel.
  3. Click the 'Choose Excel File' button and select the file you just downloaded (usually from your 'Downloads' folder).
  4. Finally, click the 'Load to Diagram' button to visualize the processes.

Alternatively, if you already have a compatible JSON file, you can use Menu > Load > Load JSON.

For more detailed instructions and to learn about all features, check out the Tutorial (available under Menu > Tutorial / Help).

Process Dependencies

Process Details

Filters

Load data to see filter options.

XLSX to JSON Converter

Select an XLSX file. Each sheet will be converted. The output JSON will be an object with sheet names as keys.

Important: Ensure column names in your XLSX file match expected keys (e.g., "ID", "Short name", "Process Type"). The converter will attempt to process all sheets.

Generated JSON Preview (first 3 records of first sheet):


    

Simulation Mode

Interactive Diagram Tutorial

Introduction

Welcome to the Interactive Process Diagram! This tool helps you visualize, analyze, and understand complex process flows and their dependencies. Use this guide to learn about its features.

Loading Data

There are a few ways to get your process data into the diagram:

The diagram expects specific column headers in your data (e.g., "ID", "Short name", "WD", "Due time", "Dependencies", "Process Type").

Understanding Process Nodes & Diagram Area

Navigating the Diagram

Filtering and Searching

Interacting with Nodes

Editing Dependencies

  1. Go to Menu > Enable Dependency Editing.
  2. Click on a source node. A green '+' handle appears on its right.
  3. Drag this '+' handle to a target node.
  4. On release, a context menu will appear. Choose the dependency type ("Standard", "Blocking", or "Informational").
  5. To remove a dependency, click the red '–' handle that appears on a linked output node.

Simulation Mode (Multi-Process)

This powerful mode allows you to see the potential impact of changing multiple processes at once without altering your actual data.

  1. Select a process and click the 'Simulate Impact' button in the details panel to start.
  2. The Simulation Panel opens with the first process on a "card". Here you can choose to Shift its WD/Time or Remove it from the flow.
  3. You can add more processes to the simulation using the "Add another process" dropdown at the bottom of the panel. Each will get its own card.
  4. After making your changes on the cards, you must click the 'Run / Update Simulation' button to see the effects on the diagram.
  5. The diagram will highlight the target processes and color-code any dependent nodes that are at risk or have timing conflicts. A summary appears in the panel.
  6. Use the 'End Simulation' button to exit and return to the normal view.
  7. You can also save the current set of changes as a named scenario for later use.

Presentation Mode

Click the 'Presentation' button for a clean, full-screen view ideal for showcasing the diagram. Most UI controls are hidden. Click 'Presentation' again to exit.

View Configurations

Standard
Blocking (_B)
Informational (_I)