/* Load Roboto Font */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

        html, body {
            height: 100%;
            min-height: 100vh;
        }

        body {
            font-family: 'Roboto', sans-serif;
            --eecol-blue: #0058B3;
            --eecol-orange: #FF9900;
        }

        .eecol-blue-bg {
            background-image: linear-gradient(to bottom, var(--eecol-blue) 20%, white 80%);
        }

        .header-gradient {
            background-image: linear-gradient(90deg, var(--eecol-blue), #004a99);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        .card-border-blue {
            border-left-color: var(--eecol-blue);
        }

        .eecol-logo-tilt {
            transform: rotate(-20deg);
            transform-origin: center;
        }

        .layer-list-container {
            max-height: 120px;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
            padding: 6px;
            border-radius: 8px;
            background-color: #f9fafb;
        }

        /* SVG HOVER STYLES FOR VISUALIZATION */
        .svg-dimension-line line, .svg-dimension-line text, .svg-dimension-line path {
            transition: stroke 0.15s ease-in-out, fill 0.15s ease-in-out;
        }

        .highlight-A.active line,
        .highlight-A.active text {
            stroke: var(--eecol-orange) !important;
            fill: var(--eecol-orange) !important;
        }
        .highlight-B.active line,
        .highlight-B.active text {
            stroke: var(--eecol-orange) !important;
            fill: var(--eecol-orange) !important;
        }
        .highlight-C.active line,
        .highlight-C.active text {
            stroke: var(--eecol-orange) !important;
            fill: var(--eecol-orange) !important;
        }
        .highlight-D.active line,
        .highlight-D.active text {
            stroke: var(--eecol-orange) !important;
            fill: var(--eecol-orange) !important;
        }
        .highlight-E.active line,
        .highlight-E.active text {
            stroke: var(--eecol-orange) !important;
            fill: var(--eecol-orange) !important;
        }

        /* Dark Mode Support for SVG Diagram */
        .dark-mode .svg-dimension-line line {
            stroke: #ffffff;
        }

        .dark-mode .svg-dimension-line text {
            fill: #ffffff;
            stroke: none;
        }

        /* Enhanced mobile responsive improvements */
        @media (max-width: 640px) {
            /* Touch-friendly input sizing */
            .mobile-touch-input {
                padding: 0.75rem !important;
                font-size: 16px !important; /* Prevent zoom on iOS */
                min-height: 44px !important; /* Apple's minimum touch target */
            }

            /* Better button stacking */
            .mobile-button-stack {
                flex-direction: column !important;
                gap: 0.5rem !important;
                width: 100%;
            }
            .mobile-button-stack button,
            .mobile-button-stack a {
                width: 100% !important;
                margin: 0 !important;
                padding: 0.75rem 1rem !important;
                min-height: 44px !important;
            }

            /* Compact spacing for mobile forms */
            .mobile-compact-spacing {
                gap: 0.5rem !important;
                padding: 0.75rem !important;
            }

            /* Better spacing for form elements */
            .space-y-4 > * + * {
                margin-top: 0.75rem !important;
            }
            .space-y-6 > * + * {
                margin-top: 1rem !important;
            }

            /* Stack side-by-side selects on mobile */
            .flex.flex-col.space-y-1.sm\\:flex-row.sm\\:space-x-1.sm\\:space-y-0 {
                flex-direction: column !important;
                gap: 0.5rem !important;
            }

            /* Better mobile modal sizing */
            #customModal .relative {
                margin: auto !important;
                max-width: 90vw !important;
            }

            /* Compress larger text on mobile for better fit */
            .text-3xl {
                font-size: 1.5rem !important;
                line-height: 2rem !important;
            }

            /* Scale down SVG diagram on mobile */
            #leftColumn svg {
                width: 200px !important;
                height: 120px !important;
            }
        }

        /* Additional touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            /* Touch device specific enhancements */
            button, input, select {
                min-height: 44px !important;
            }
        }

        /* Additional styles for dynamic elements */
        .progress-bar {
            transition: width 0.5s ease-in-out, background-color 0.3s ease-in-out;
        }
        .progress-bar.safe {
            background-color: #10b981; /* green */
        }
        .progress-bar.warning {
            background-color: #f59e0b; /* orange */
        }
        .progress-bar.danger {
            background-color: #ef4444; /* red */
        }
        .safety-warning {
            animation: blink 1s linear infinite;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .fleet-angle-viz {
            position: relative;
            margin: 10px 0;
        }
        .fleet-angle-line {
            stroke-width: 1px;
            transition: stroke 0.3s ease;
        }
        .towperknot-indicator {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 5px;
            transition: background-color 0.3s ease;
        }
        .towperknot-good {
            background-color: #10b981;
        }
        .towperknot-warning {
            background-color: #f59e0b;
        }
        .towperknot-bad {
            background-color: #ef4444;
        }
        .towper-space-bar {
            margin: 5px 0;
            background-color: #f0f8ff;
            border-radius: 8px;
            padding: 10px;
        }