html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
        }

        .ph-gradient {
            background: linear-gradient(90deg, #1e40af 0%, #3bf660 25%, #06b6d4 50%, #10b981 75%, #fbbf24 100%);
        }

        .do-gradient {
            background: linear-gradient(90deg, #1e40af 0%, #059669 50%, #dc2626 100%);
        }

        .tds-gradient {
            background: linear-gradient(90deg, #065f46 0%, #ca8a04 50%, #dc2626 100%);
        }

        .ph-bg-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #3bf660 20%, #06b6d4 40%, #10b981 70%, #fbbf24 100%);
        }

        .do-bg-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #059669 50%, #dc2626 100%);
        }

        .tds-bg-gradient {
            background: linear-gradient(135deg, #065f46 0%, #ca8a04 50%, #dc2626 100%);
        }

        /* Header button styles */
        .header-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 6px;
            background: linear-gradient(145deg, #1e40af 0%, #3bf660 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            min-height: 55px;
            width: 100%;
        }

        .header-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
            background: linear-gradient(145deg, #3bf660 0%, #1e40af 100%);
        }

        .header-button i {
            font-size: 16px;
            margin-bottom: 5px;
        }

        /* Statistics button styles */
        .statistics-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 70px;
            height: 70px;
            background: linear-gradient(145deg, #059669 0%, #10b981 100%);
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .statistics-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
            background: linear-gradient(145deg, #10b981 0%, #059669 100%);
        }

        .statistics-button:active {
            transform: translateY(-1px);
        }

        /* Statistics Panel Animation */
        .statistics-panel {
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .statistics-panel.show {
            transform: translateX(0);
            opacity: 1;
        }

        /* Custom styles for the header */
        .dashboard-header {
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 1rem;
            margin-bottom: 0;
        }

        /* Custom styles for the main app layout */
        #app {
            height: calc(100% - 150px);
        }

        /* Day selector styles */
        .day-grid {
            max-height: 300px;
            overflow-y: auto;
        }

        .day-button {
            transition: all 0.2s ease;
        }

        .day-button:hover {
            transform: scale(1.05);
        }

        /* Date range slider */
        .date-slider {
            width: 220px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .date-range-input {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #3bf660 0%, #06b6d4 100%);
            outline: none;
        }

        .date-range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1e40af;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .date-range-input::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1e40af;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        /* Legend styles */
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            margin-right: 8px;
        }

        .legend-label {
            font-size: 12px;
            color: #374151;
        }

        /* Layer list styles */
        .layer-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 6px;
            background-color: white;
            transition: all 0.2s ease;
        }

        .layer-item:hover {
            background-color: #f3f4f6;
        }

        .layer-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .layer-item label {
            flex: 1;
            font-size: 13px;
            cursor: pointer;
        }

        .layer-opacity {
            width: 80px;
            margin-left: 10px;
            -webkit-appearance: none;
            height: 4px;
            border-radius: 2px;
            background: #d1d5db;
            outline: none;
        }

        .layer-opacity::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #3bf660;
            cursor: pointer;
        }

        .layer-opacity::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #3bf660;
            cursor: pointer;
            border: none;
        }

        /* Gauge styles */
        .gauge-container {
            background: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .header-button {
                font-size: 10px;
                padding: 7px 5px;
                min-height: 50px;
            }

            .header-button i {
                font-size: 14px;
            }

            .date-slider {
                width: 180px;
                padding: 10px;
            }

            .statistics-button {
                width: 60px;
                height: 60px;
                bottom: 15px;
                right: 15px;
                font-size: 20px;
            }

            .statistics-panel {
                width: 380px !important;
            }
        }

        @media (max-width: 768px) {
            #app {
                flex-direction: column;
                height: calc(100% - 180px);
            }

            .dashboard-header {
                padding: 0.75rem;
            }

            .header-button {
                min-height: 45px;
                font-size: 9px;
            }

            .header-button i {
                font-size: 12px;
            }

            .date-slider {
                width: 160px;
                padding: 8px;
            }

            .statistics-button {
                width: 50px;
                height: 50px;
                bottom: 10px;
                right: 10px;
                font-size: 18px;
            }

            .statistics-panel {
                width: 320px !important;
                right: 10px !important;
            }
        }

        /* Loading animation */
        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        .loading-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        /* تنسيقات شريط الوقت */
#date-slider-container {
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
}

#date-slider-container.hidden {
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

/* زر التحكم في شريط الوقت */
#time-slider-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 15;
}
/* Side Panel Toggle Styles */
#side-panel-toggle {
    transition: all 0.3s ease;
    z-index: 25;
}

#side-panel {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

#side-panel.hidden {
    transform: translateX(-100%);
}

/* Responsive adjustments for side panel */
@media (max-width: 768px) {
    #side-panel {
        position: absolute;
        height: 100%;
    }
    
    #side-panel.hidden {
        transform: translateX(-100%);
    }
}