/* styles.css - Sparta Gym Emergency Flowchart Styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


Watermarkstyled__StyledWatermark-sc-11r3nbg-2 {
	display:none;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #101010;
    color: #fff;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    /* Mobile optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent bounce scrolling on iOS */
    overscroll-behavior: none;
    /* Disable text selection for better touch experience */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Connection Path Animations */
.connection-path {
    transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Enhanced mobile visibility for connection paths */
@media (max-width: 768px) {
    .connection-path {
        stroke-width: 3px !important; /* Thicker lines on mobile */
        stroke: #888 !important; /* Slightly brighter default color */
    }
    
    /* Active trail path highlighting for mobile */
    .connection-path[data-trail="active"] {
        stroke: #ffc107 !important;
        stroke-width: 4px !important;
        stroke-dasharray: none !important;
        filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.5));
    }
    
    /* Inactive paths when trail is active - make them more subtle */
    .connection-path[data-trail="inactive"] {
        stroke: #444 !important;
        stroke-width: 2px !important;
        opacity: 0.6;
    }
}

/* Flowchart Container - Full Viewport */
#flowchart-container {
    width: 100vw;
    height: 100vh;
    background: #101010;
    overflow: auto;
    position: relative;
}

#flowchart-svg {
    width: 100%;
    min-height: 100vh;
    background: #101010;
    display: block;
}

/* Node Styles */
.node rect {
    fill: #e9ecef;
    stroke: #6c757d;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.node text {
    fill: #333;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.video-icon {
    font-size: 16px !important;
    pointer-events: none;
}

/* Node type specific styles */
.node-start rect {
    fill: #ffffff;
    stroke: #cccccc;
}

.node-start text {
    fill: #101010;
    font-weight: bold;
}

.node-question rect {
    fill: #101010;
    stroke: #333333;
}

.node-question text {
    fill: #ffffff;
}

.node-yes rect {
    fill: #31a46e;
    stroke: #258a5a;
}

.node-yes text {
    fill: #ffffff;
}

.node-no rect {
    fill: #cc0000;
    stroke: #990000;
}

.node-no text {
    fill: #ffffff;
    font-weight: bold;
}

.node-end rect {
    fill: #ffffff;
    stroke: #cccccc;
}

.node-end text {
    fill: #101010;
}

/* Video node ready-to-watch state */
.node.ready-to-watch rect {
    stroke: #ffc107 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 5,5;
    animation: pulse-border 2s infinite;
}

.node.ready-to-watch text {
    font-weight: bold;
    pointer-events: none; /* Ensure text doesn't block clicks */
    z-index: 100; /* Force text above other elements */
}

@keyframes pulse-border {
    0%, 100% {
        stroke-opacity: 1;
    }
    50% {
        stroke-opacity: 0.5;
    }
}

/* Node states */
.node.active rect {
    stroke: #ffc107;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #ffc107);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        stroke-width: 4;
    }
    50% {
        stroke-width: 6;
    }
    100% {
        stroke-width: 4;
    }
}

/* Responsive Styles - Consistent sizing */

/* Video Container - Minimalistic */
#video-container {
    margin: 15px 0;
    text-align: center;
}

.video-placeholder {
    background: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 40px;
    color: #666;
}

.video-placeholder p {
    margin: 8px 0;
    font-size: 1em;
}

#video-description {
    background: #f8f8f8;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
    border-left: 3px solid #2a5298;
}

/* Help Content - Minimalistic */
.help-content h4 {
    color: #2a5298;
    margin: 15px 0 8px 0;
    font-size: 1.1em;
    font-weight: 600;
}

.help-content ul {
    list-style-position: inside;
    margin: 12px 0;
}

.help-content li {
    margin: 6px 0;
    line-height: 1.5;
}

.help-content strong {
    color: #2a5298;
}

/* Mobile-specific touch and visual enhancements */
@media (max-width: 768px) {
    /* Larger touch targets for nodes on mobile */
    .node {
        cursor: pointer;
        touch-action: manipulation; /* Improve touch responsiveness */
    }
    
    /* Enhanced active node styling for mobile */
    .node.active rect {
        stroke-width: 5px !important;
        filter: drop-shadow(0 0 8px #ffc107) !important;
    }
    
    /* Better visibility for video nodes on mobile */
    .node.ready-to-watch rect {
        stroke-width: 4px !important;
        filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.6)) !important;
    }
    
    /* Reduce font size slightly on very small screens */
    @media (max-width: 480px) {
        .node text {
            font-size: 12px !important;
        }
        
        .video-icon {
            font-size: 14px !important;
        }
    }
}

/* Connection path visual enhancements */
.connection-path {
    /* Smooth transitions for all path changes */
    transition: stroke 0.4s ease, stroke-width 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}

/* Subtle animation for active trail paths */
.connection-path[data-trail="active"] {
    animation: trail-pulse 3s ease-in-out infinite;
}

@keyframes trail-pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.8; 
    }
}

/* Path direction indicators */
.path-indicator {
    transition: fill 0.3s ease, opacity 0.3s ease;
}

/* Highlight active path indicators */
.path-indicator[fill="#ffc107"] {
    animation: indicator-glow 2s ease-in-out infinite;
}

@keyframes indicator-glow {
    0%, 100% { 
        opacity: 0.9; 
    }
    50% { 
        opacity: 0.6; 
    }
}

/* Branch hiding feature for focused flowchart view */
.hidden-branch {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
}

/* Enhanced transitions for branch showing/hiding */
.node, .connection-path, .path-indicator {
    transition: opacity 0.6s ease-out;
}

/* Ensure visible elements maintain full opacity */
.node:not(.hidden-branch), 
.connection-path:not(.hidden-branch), 
.path-indicator:not(.hidden-branch) {
    opacity: 1;
}

/* Add a subtle highlight to next possible steps */
.node:not(.hidden-branch):not(.active) {
    transition: opacity 0.6s ease-out, filter 0.3s ease;
}

.node:not(.hidden-branch):not(.active):hover {
    filter: brightness(1.1);
}

/* Special styling for start node when branches are hidden */
.node-start:not(.active) {
    position: relative;
}

.node-start:not(.active):hover rect {
    stroke: #ffc107 !important;
    stroke-width: 3px !important;
}

/* Subtle pulse effect for start node when other branches are hidden */
.node-start:not(.active) rect {
    animation: subtle-pulse 4s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.85; 
    }
}

/* Consistent container styling - no mobile overrides */