: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:
Go to Menu > Load > Load from SharePoint to download the latest process file.
After the file is downloaded, return to the diagram and go to Menu > Load > Load Excel .
Click the 'Choose Excel File' button and select the file you just downloaded (usually from your 'Downloads' folder).
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
Highlight Tree Nodes
×
Sim: Input OK:
Sim: Output OK:
Process (default):
Lightning:
Input Process (OK):
Output Process (OK):
Sim: Input Conflict:
Sim: Output at Risk:
Input Arrow (Std):
Output Arrow (Std):
Blocking Process:
Informational Process:
Input Arrow (Block):
Output Arrow (Block):
Input Arrow (Info):
Output Arrow (Info):
×
Filters
Load data to see filter options.
Apply Filters
×
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.
Convert and Download JSON
Convert and Load to Diagram
Generated JSON Preview (first 3 records of first sheet):
×
Simulation Mode
Run / Update Simulation
End Simulation
Export Report
Processes in Simulation
Add another process:
- Select a process to add -
Add
Manage Scenarios:
Save Current as Scenario
×
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:
From SharePoint (Recommended for initial load):
Go to Menu > Load > Load from SharePoint . This will initiate the download of the latest process definitions in an XLSX file.
Once the download is complete, return to the diagram's menu and navigate to Menu > Load .
In the Load Excel section, click the 'Choose Excel File' button and select the file you just downloaded.
After selecting the file, click the 'Load to Diagram' button to display the data.
Load JSON File: If you have a pre-formatted JSON file, use Menu > Load > Load JSON .
Load Excel File: If you have an XLSX file (not from SharePoint), use Menu > Load > Load Excel . Choose your file, then either load it directly to the diagram or convert and download as JSON.
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
Each box (node) represents a process. It displays the "Short name".
"WD" (Working Day) and "Due time" determine its position on the X (time/day) and Y (time of day) axes.
Nodes can be of type "Standard", "Blocking" (B ), "Informational" (I ), or the new "Standard-Blocking" (S/B ) which has a dashed border. This affects dependency interpretation.
Sticky axes (top and left) help you understand the timeline even when scrolled.
Navigating the Diagram
Zoom: Use your mouse wheel to zoom in and out.
Pan: Click and drag the diagram background to move around.
Mini-Map: Toggle the Mini-Map using the 'M' button in the top right.
Reset View: Click 'Reset View' to return to the default zoom and position.
Filtering and Searching
Filters: Click the 'Filters' button to filter processes based on attributes like "Company Codes", "WD", etc.
Search: Use the "Search processes..." bar to find nodes by ID, Short name, or Description.
Axis Filtering: Click on a WD label on the top axis or a time label on the left axis to quickly filter for that day/hour.
Interacting with Nodes
Selection: Click a node to select it, highlight its dependencies, and dim other nodes.
Process Details: When a node is selected, its details appear at the bottom. From here, you can edit it or start a simulation.
Dependency Tree: With a node selected, use Menu > Show Dependencies to open a side panel showing its input/output hierarchy.
Editing Dependencies
Go to Menu > Enable Dependency Editing .
Click on a source node. A green '+' handle appears on its right.
Drag this '+' handle to a target node.
On release, a context menu will appear. Choose the dependency type ("Standard", "Blocking", or "Informational").
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.
Select a process and click the 'Simulate Impact' button in the details panel to start.
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.
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.
After making your changes on the cards, you must click the 'Run / Update Simulation' button to see the effects on the diagram.
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.
Use the 'End Simulation' button to exit and return to the normal view.
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
Save View: After setting up desired filters and colors, go to Menu > Save View Config to save this setup with a name.
Load/Delete View: Use the "Load View:" dropdown and the adjacent trash icon in the Menu to apply or delete saved configurations.