/* CCTV Styles */
.cctv-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.cctv-video-wrapper iframe {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cctv-video-wrapper .hidden {
    display: none;
}

.cctv-video-wrapper > div:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 8px;
    padding: 2rem;
}

.cctv-video-wrapper button {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.cctv-video-wrapper button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Loading animation */
.cctv-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: cctvSpin 1s ease-in-out infinite;
}

@keyframes cctvSpin {
    to { transform: rotate(360deg); }
}

/* Alternative CCTV View */
.cctv-alternative-view {
    min-height: 400px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 8px;
    padding: 2rem;
}

.cctv-alternative-view h3 {
    color: #fff;
    margin-bottom: 1rem;
}

.cctv-alternative-view p {
    color: #d1d5db;
    margin-bottom: 1rem;
}

.cctv-alternative-view button {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.cctv-alternative-view button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* QR Code Modal */
#cctv-qr-modal {
    z-index: 10000;
}

/* Modal z-index fixes */
.modal-z-index-fix {
    z-index: 9999 !important;
}

/* Leaflet popup z-index fix */
.leaflet-popup-pane {
    z-index: 1000 !important;
}

.leaflet-tooltip-pane {
    z-index: 1001 !important;
}

/* Map container z-index fix */
#cctv-map,
#fullscreen-cctv-map,
#cctvDetailMap {
    z-index: 1 !important;
}

/* Modal backdrop z-index fix */
.modal-backdrop {
    z-index: 9998 !important;
}

#cctv-qr-modal .bg-white {
    max-width: 400px;
}

/* Notification styles */
.notification-enter {
    transform: translateX(100%);
}

.notification-exit {
    transform: translateX(100%);
}

/* Custom Video Player Styles */
.cctv-custom-player {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 8px;
    overflow: hidden;
}

.cctv-custom-player video {
    background: #000;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cctv-custom-player .video-controls {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.cctv-custom-player button {
    transition: all 0.2s ease;
}

.cctv-custom-player button:hover {
    transform: scale(1.1);
}

/* Video status indicators */
.status-loading { color: #f59e0b; }
.status-playing { color: #10b981; }
.status-paused { color: #f59e0b; }
.status-buffering { color: #3b82f6; }
.status-error { color: #ef4444; }

/* Video loading overlay */
.video-loading-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

/* Video error overlay */
.video-error-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

/* Responsive video player */
@media (max-width: 768px) {
    .cctv-custom-player .video-controls {
        padding: 8px;
    }
    
    .cctv-custom-player button {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Full screen map styles */
.fullscreen-map-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: white;
}

.fullscreen-map-layout .map-container {
    width: 100%;
    height: 100vh;
}

.fullscreen-map-layout .sidebar-container {
    position: absolute;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
}

.fullscreen-map-layout .sidebar-container.active {
    right: 0;
}

.fullscreen-map-layout .toggle-sidebar-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: white;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide sidebar in fullscreen mode */
.hide-sidebar {
    display: none !important;
}

/* Map container full width */
.map-full-width {
    grid-column: 1 / -1 !important;
}

/* Animation for sidebar toggle */
.sidebar-transition {
    transition: all 0.3s ease;
}

/* Mobile Responsive Improvements */
@media (max-width: 767px) {
    #filter-form {
        flex-direction: column;
        gap: 1rem;
    }
    
    #filter-form .flex-1 {
        width: 100%;
    }
    
    #filter-form .flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    
    #filter-form button {
        width: 100%;
        justify-content: center;
    }
    
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .md\:col-span-2 {
        grid-column: span 1;
    }
    
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .order-2.lg\:order-1,
    .order-1.lg\:order-2 {
        order: unset;
    }
    
    #cctv-map {
        height: 300px !important;
        min-height: 300px !important;
    }
    
    #cctv-map .absolute.top-4.left-4 {
        position: relative;
        top: unset !important;
        left: unset !important;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    #cctv-map-search {
        width: 100% !important;
    }
    
    #cctv-list-container .max-h-96.lg\:max-h-full {
        max-height: 400px;
    }
    
    .cctv-item {
        padding: 1rem !important;
    }
    
    .cctv-item .flex.items-start.justify-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cctv-item .flex.flex-col.items-end.space-y-2 {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .max-w-4xl {
        max-width: 95vw;
        margin: 1rem;
    }
    
    .max-h-\[90vh\] {
        max-height: 95vh;
    }
    
    .bg-gradient-to-r.from-blue-600.to-indigo-600.text-white.px-6.py-4 {
        padding: 1rem;
    }
    
    .bg-gradient-to-r.from-blue-600.to-indigo-600.text-white .flex.items-center.space-x-3 {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #fullscreen-cctv-map .relative .absolute.top-0.left-0.right-0 .flex.items-center.justify-between {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    #fullscreen-cctv-search {
        width: 100% !important;
        max-width: unset !important;
    }
    
    #fullscreen-search-results {
        width: 100% !important;
        right: unset !important;
        left: 0 !important;
    }
    
    .bg-gradient-to-r.from-green-600.to-green-700 {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .bg-white.rounded-lg.shadow-sm.p-6 {
        padding: 1rem;
    }
    
    .bg-white.rounded-lg.shadow-sm.p-6 .flex.items-center {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .bg-white.rounded-lg.shadow-sm.p-6 .ml-4 {
        margin-left: 0;
    }
    
    .mt-4.bg-gray-50.rounded-lg.p-4 {
        margin-top: 0.5rem;
        padding: 0.75rem;
    }
    
    .flex.flex-wrap.gap-4 {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .text-4xl.md\:text-5xl {
        font-size: 2rem;
    }
    
    .text-xl {
        font-size: 1rem;
    }
    
    label {
        font-size: 0.875rem;
    }
    
    input, select {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .cctv-item h4 {
        font-size: 1rem;
    }
    
    .cctv-item p {
        font-size: 0.75rem;
    }
    
    .max-w-4xl {
        max-width: 98vw;
        margin: 0.5rem;
    }
    
    #cctv-map {
        height: 250px !important;
        min-height: 250px !important;
    }
    
    .bg-blue-600.hover\:bg-blue-700.text-white span {
        display: none;
    }
    
    .border.border-gray-300.hover\:bg-gray-50 span {
        display: none;
    }
}