/* --- DEDICATED, PROFESSIONAL & CORRECTED STYLES for loganalysis.html --- */

/* Scene 1: Data Correlation */
.correlation-node { position: absolute; width: 200px; padding: 15px; text-align: center; border: 2px solid var(--secondary-surface); border-radius: 12px; background-color: var(--dark-bg); box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: all 0.5s ease-in-out; opacity: 0.4; }
.correlation-node h3 { color: var(--accent-color); font-size: 14px; margin-bottom: 5px; }
.correlation-node p { font-size: 11px; color: var(--text-muted); }
.correlation-node.active { opacity: 1; border-color: var(--accent-color); box-shadow: 0 0 35px rgba(0, 188, 212, 0.4); transform: scale(1.05); }
.correlation-arrow { stroke-dasharray: 200; stroke-dashoffset: 200; stroke: var(--text-muted); stroke-width: 2; transition: stroke-dashoffset 1s ease-in-out, stroke 0.5s; }
.correlation-arrow.active { stroke: var(--accent-color); stroke-dashoffset: 0; }

/* Scene 2 & 3: OS and Web Logs */
.la-container { display: flex; gap: 20px; width: 100%; height: 100%; }
.la-sidebar { flex: 0 0 250px; background-color: var(--primary-surface); border-radius: 10px; padding: 15px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--secondary-surface); }
.la-sidebar-button { width: 100%; padding: 12px 15px; background-color: var(--secondary-surface); border: 1px solid #444; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; color: var(--text-muted); transition: all 0.3s; }
.la-sidebar-button:hover:not(.active) { background-color: #4a4a4a; color: var(--text-color); }
.la-sidebar-button.active { background-color: var(--accent-color); color: var(--dark-bg); font-weight: 600; border-color: var(--accent-color); }

.la-content-area { flex-grow: 1; position: relative; }
.la-content-panel { position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }
.la-content-panel.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.la-terminal { position: absolute; top:0; left:0; right: 0; bottom: 0; background-color: #0d0d0d; border: 1px solid var(--secondary-surface); border-radius: 8px; padding: 20px; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; color: #EAEAEA; white-space: pre-wrap; word-break: break-all; overflow: auto; }
.la-terminal .highlight-bad { background-color: rgba(244, 67, 54, 0.3); }
.la-terminal .highlight-good { background-color: rgba(76, 175, 80, 0.3); }
.la-terminal .highlight-warn { background-color: rgba(255, 152, 0, 0.2); }

/* Scene 4: Cloud Logs */
.cloud-event-table { width: 100%; background-color: var(--secondary-surface); border-radius: 8px; overflow: hidden; font-size: 13px; border: 1px solid var(--secondary-surface); border-collapse: collapse; }
.cloud-event-table th { background-color: var(--primary-surface); padding: 12px 15px; text-align: left; }
.cloud-event-table td { padding: 12px 15px; border-top: 1px solid var(--primary-surface); }
.cloud-event-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
.cloud-event-table tbody tr:hover { background-color: #4a4a4a; }

.json-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 100; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.json-modal-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.json-modal-content { width: 60%; max-width: 800px; height: 70%; background-color: var(--dark-bg); border: 1px solid #555; border-radius: 12px; box-shadow: 0 10px 50px #000; display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s; }
.json-modal-overlay.active .json-modal-content { transform: scale(1); }
.json-modal-header { padding: 10px 15px; background-color: var(--secondary-surface); border-bottom: 1px solid #555; font-weight: 600; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.json-modal-header button { float: right; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.json-modal-header button:hover { opacity: 1; }
.json-modal-body { flex-grow: 1; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; white-space: pre; overflow: auto; }
.json-modal-body .key { color: var(--accent-color); }
.json-modal-body .string { color: var(--color-good); }
.json-modal-body .number { color: var(--color-warning); }

/* Sub-step navigation for step-by-step control */
.sub-step-nav { position: absolute; bottom: 15px; right: 20px; z-index: 100; }
.sub-step-button { background-color: var(--secondary-surface); color: var(--text-muted); border: 1px solid #555; padding: 8px 15px; font-size: 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.sub-step-button:hover:not(:disabled) { background-color: var(--accent-color); color: var(--dark-bg); }
.sub-step-button:disabled { cursor: not-allowed; opacity: 0.3; }