.command-card{

background:#fff;

border-radius:28px;

padding:25px;

box-shadow:0 15px 40px rgba(15,23,42,.08);

height:100%;

}

.section-header{

    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:20px;
    
    flex-wrap:wrap;
    
    gap:15px;
    
}


.section-header h4{

    font-weight:700;
    
    margin:0;
    
}

.section-header small{

    color:#64748b;
    
}


.header-actions{

    display:flex;
    
    gap:10px;
    
}

.btn-map{

    border:none;
    
    background:#f1f5f9;
    
    padding:10px 18px;
    
    border-radius:50px;
    
    font-weight:600;
    
    transition:.3s;
    
}

.btn-map.active{

    background:#2563eb;
    
    color:white;
    
}

#liveMap{

    height:520px;
    
    background:#dbeafe;
    
    border-radius:24px;
    
    position:relative;
    
    overflow:hidden;
    
}

#liveMap{

    background-image:url(images/map.jpg);
    
    background-size:cover;
    
    background-position:center;
    
}

.map-overlay{

    position:absolute;
    
    top:20px;
    
    left:20px;
    
}

.live-tag{

    background:white;
    
    padding:10px 18px;
    
    border-radius:50px;
    
    font-weight:700;
    
    display:flex;
    
    align-items:center;
    
    gap:10px;
    
    box-shadow:0 10px 25px rgba(0,0,0,.1);
    
}

.pulse{

    width:10px;
    
    height:10px;
    
    background:#16a34a;
    
    border-radius:50%;
    
    animation:pulseGlow 1.5s infinite;
    
}

.camera-card{

    background:white;
    
    border-radius:28px;
    
    padding:22px;
    
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    
    height:100%;
    
}

.camera-preview{

    position:relative;
    
    overflow:hidden;
    
    border-radius:20px;
    
    margin:20px 0;
    
}

.camera-preview img{

    width:100%;
    
    height:260px;
    
    object-fit:cover;
    
}

.camera-live{

    position:absolute;
    
    top:15px;
    
    left:15px;
    
    background:red;
    
    color:white;
    
    padding:6px 12px;
    
    border-radius:30px;
    
    font-size:12px;
    
    font-weight:700;
    
}

.camera-info{

    display:flex;
    
    justify-content:space-between;
    
    padding:18px 0;
    
    border-bottom:1px solid #eee;
    
}

.camera-info:last-child{

    border:none;
    
}

.camera-info small{

    color:#64748b;
    
}

.camera-info h5{

    font-weight:700;
    
    margin-top:6px;
    
}


@media(max-width:991px){

    #liveMap{
    
    height:380px;
    
    }
    
    .camera-preview img{
    
    height:220px;
    
    }
    
}


@media(max-width:576px){

    #liveMap{
    
    height:280px;
    
    }
    
    .section-header{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    }
    
    .camera-preview img{
    
    height:180px;
    
    }
    

}


.sensor-status-card{

    background:#fff;
    
    border-radius:24px;
    
    overflow:hidden;
    
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    
    margin-bottom:30px;
    
}


.sensor-header{

    background:linear-gradient(135deg,#16a34a,#22c55e);
    
    padding:22px 28px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    flex-wrap:wrap;
    
    gap:20px;
    
    color:#fff;
    
}

.sensor-title{

    display:flex;
    
    align-items:center;
    
    gap:18px;
    
}

.sensor-icon{

    width:55px;
    
    height:55px;
    
    border-radius:16px;
    
    background:rgba(255,255,255,.18);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:24px;
    
    backdrop-filter:blur(10px);
    
}

.sensor-title h5{

    margin:0;
    
    font-weight:700;
    
    font-size:22px;
    
}

.sensor-title p{

    margin:5px 0 0;
    
    opacity:.95;
    
    font-size:14px;
    
}


.live-indicator{

    background:rgba(255,255,255,.15);
    
    padding:10px 18px;
    
    border-radius:40px;
    
    font-weight:700;
    
    display:flex;
    
    align-items:center;
    
    gap:10px;
    
    backdrop-filter:blur(15px);
    
}

.sensor-filter{

    padding:28px;
    
    background:#fff;
    
}

.sensor-filter label{

    font-weight:600;
    
    margin-bottom:8px;
    
}


.sensor-select{

    height:58px;
    
    border-radius:16px;
    
    border:2px solid #e2e8f0;
    
    font-weight:600;
    
}


.sensor-select:focus{

    border-color:#2563eb;
    
    box-shadow:0 0 0 .25rem rgba(37,99,235,.12);
    
}


.admin-note{

    height:58px;
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    padding:0 18px;
    
    background:#eff6ff;
    
    border-radius:16px;
    
    color:#2563eb;
    
    font-weight:600;
    
}


.clear-alert-btn{

    height:58px;
    
    border-radius:16px;
    
    background:#f97316;
    
    color:white;
    
    font-weight:700;
    
    padding:0 24px;
    
    border:none;
    
    transition:.3s;
    
    width:100%;
    
}


.clear-alert-btn:hover{

    background:#ea580c;
    
    transform:translateY(-2px);
    
}


@media(max-width:991px){

    .sensor-header{
    
    padding:20px;
    
    }
    
    .sensor-filter{
    
    padding:20px;
    
    }
    
    .live-indicator{
    
    width:100%;
    
    justify-content:center;
    
    }
    
}

@media(max-width:576px){

    .sensor-title{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    }
    
    .sensor-title h5{
    
    font-size:18px;
    
    }
    
    .sensor-icon{
    
    width:48px;
    
    height:48px;
    
    font-size:20px;
    
    }
    
}


.sensor-card{

    background:#fff;
    
    border-radius:22px;
    
    padding:28px 20px;
    
    height:100%;
    
    text-align:center;
    
    box-shadow:0 12px 30px rgba(15,23,42,.08);
    
    transition:.35s;
    
    border:1px solid #edf2f7;
    
    position:relative;
    
    overflow:hidden;
    
    }

    .sensor-card:hover{

        transform:translateY(-8px);
        
        box-shadow:0 20px 45px rgba(37,99,235,.15);
        
    }


    .sensor-card-icon{

        width:75px;
        
        height:75px;
        
        border-radius:20px;
        
        margin:auto;
        
        display:flex;
        
        justify-content:center;
        
        align-items:center;
        
        font-size:32px;
        
        color:white;
        
        margin-bottom:20px;
        
    }


    .elephant{

        background:linear-gradient(135deg,#92400e,#d97706);
        
        }
        
        .leopard{
        
        background:linear-gradient(135deg,#f59e0b,#facc15);
        
        }
        
        .tiger{
        
        background:linear-gradient(135deg,#ef4444,#f97316);
        
        }
        
        .other{
        
        background:linear-gradient(135deg,#06b6d4,#0ea5e9);
        
        }
        
        .call{
        
        background:linear-gradient(135deg,#7c3aed,#8b5cf6);
        
        }
        
        .sms{
        
        background:linear-gradient(135deg,#10b981,#22c55e);
        
        }
        
        .power{
        
        background:linear-gradient(135deg,#dc2626,#ef4444);
        
    }

    .sensor-card h5{

        font-size:18px;
        
        font-weight:700;
        
        margin-bottom:15px;
        
    }

    .status-badge{

        display:inline-block;
        
        padding:8px 16px;
        
        border-radius:30px;
        
        font-size:12px;
        
        font-weight:700;
        
        margin-bottom:20px;
        
    }

    .success{

        background:#dcfce7;
        
        color:#15803d;
        
        }
        
        .danger{
        
        background:#fee2e2;
        
        color:#b91c1c;
        
    }


    .sensor-info{

        list-style:none;
        
        padding:0;
        
        margin:0;
        
        }
        
        .sensor-info li{
        
        padding:8px 0;
        
        font-size:14px;
        
        color:#64748b;
        
        }
        
        .sensor-info strong{
        
        display:block;
        
        font-size:15px;
        
        color:#0f172a;
        
        margin-top:4px;
        
    }


    .danger-card{

        border-top:5px solid #dc2626;
        
    }


    @media(max-width:991px){

        .sensor-card{
        
        padding:22px 15px;
        
        }
        
        .sensor-card-icon{
        
        width:60px;
        
        height:60px;
        
        font-size:26px;
        
        }
        
    }


    @media(max-width:576px){

        .sensor-card h5{
        
        font-size:16px;
        
        }
        
        .sensor-info li{
        
        font-size:13px;
        
        }
        
    
}








.sidebar{

    width:290px;
    
    transition:.35s ease;
    
    }
    
    .main-content{
    
    margin-left:290px;
    
    transition:.35s ease;
    
    }


    .sidebar.collapsed{

        width:90px;
        
        }



        .sidebar.collapsed .logo-text{

            display:none;
            
            }



            .sidebar.collapsed .sidebar-menu span{

                display:none;
                
                }


                .sidebar.collapsed .sidebar-menu a{

                    justify-content:center;
                    
                    padding:16px;
                    
                    }


                    .sidebar.collapsed .sidebar-menu i{

                        margin:0;
                        
                        font-size:22px;
                        
                        width:auto;
                        
                        }


                        .sidebar.collapsed .sidebar-footer{

                            justify-content:center;
                            
                            }
                            
                            .sidebar.collapsed .sidebar-footer div{
                            
                            display:none;
                            
                            }


                            .sidebar.collapsed ~ .main-content{

                                margin-left:90px;
                                
                                width:calc(100% - 90px);
                                
                                }



                                @media(max-width:991px){

                                    .sidebar{
                                    
                                    left:-290px;
                                    
                                    width:290px;
                                    
                                    }
                                    
                                    .sidebar.show{
                                    
                                    left:0;
                                    
                                    }
                                    
                                    .sidebar.collapsed{
                                    
                                    width:290px;
                                    
                                    }
                                    
                                    .sidebar.collapsed .logo-text{
                                    
                                    display:block;
                                    
                                    }
                                    
                                    .sidebar.collapsed .sidebar-menu span{
                                    
                                    display:inline;
                                    
                                    }
                                    
                                    .main-content{
                                    
                                    margin-left:0!important;
                                    
                                    width:100%!important;
                                    
                                    }
                                    
                                    }




                                    .sidebar-overlay{
                                        position:fixed;
                                        inset:0;
                                        background:rgba(0,0,0,.45);
                                        opacity:0;
                                        visibility:hidden;
                                        transition:.3s;
                                        z-index:1039;
                                    }
                                    
                                    .sidebar-overlay.show{
                                        opacity:1;
                                        visibility:visible;
                                    }



                                    .page-header{

                                        background:#ffffff;
                                    
                                        border-radius:22px;
                                    
                                        padding:30px 35px;
                                    
                                        box-shadow:0 10px 30px rgba(15,23,42,.08);
                                    
                                        margin-bottom:30px;
                                    
                                    }


                                    .page-title-area h2{

                                        font-size:23px;
                                    
                                        font-weight:700;
                                    
                                        color:#1e293b;
                                    
                                        margin-bottom:8px;
                                    
                                    }


                                    .page-title-area p{

                                        font-size:16px;
                                    
                                        color:#64748b;
                                    
                                        margin:0;
                                    
                                    }


                                    .dashboard-btn{

                                        background:#ffffff;
                                    
                                        border:2px solid #2563eb;
                                    
                                        color:#2563eb;
                                    
                                        padding:12px 24px;
                                    
                                        border-radius:14px;
                                    
                                        font-weight:600;
                                    
                                        transition:.3s;
                                    
                                    }


                                    .dashboard-btn:hover{

                                        background:#2563eb;
                                    
                                        color:#ffffff;
                                    
                                        transform:translateY(-2px);
                                    
                                    }


                                    @media(max-width:768px){

                                        .page-header{
                                        
                                        padding:20px;
                                        
                                        }
                                        
                                        .page-title-area h2{
                                        
                                        font-size:28px;
                                        
                                        }
                                        
                                        .dashboard-btn{
                                        
                                        width:100%;
                                        
                                        margin-top:15px;
                                        
                                        }
                                        
                                        }



                                        .custom-card{

                                            border:none;
                                            
                                            border-radius:22px;
                                            
                                            overflow:hidden;
                                            
                                            box-shadow:0 12px 35px rgba(15,23,42,.08);
                                            
                                        }


                                        .custom-header{

                                            background:linear-gradient(90deg,#6d28d9,#7c3aed);
                                            
                                            padding:18px 28px;
                                            
                                            color:#fff;
                                            
                                            border:none;
                                            
                                        }


                                        .custom-header h5{

                                            font-weight:700;
                                            
                                            margin:0;
                                            
                                            font-size:22px;
                                            
                                        }


                                        .form-label{

                                            font-weight:600;
                                            
                                            color:#374151;
                                            
                                            margin-bottom:8px;
                                            
                                        }


                                        .custom-input{

                                            height:52px;
                                            
                                            border-radius:14px;
                                            
                                            border:2px solid #e5e7eb;
                                            
                                            font-size:15px;
                                            
                                            transition:.3s;
                                            
                                        }


                                        .custom-input:focus{

                                            border-color:#7c3aed;
                                            
                                            box-shadow:0 0 0 .2rem rgba(124,58,237,.15);
                                            
                                        }


                                        .password-box{

                                            position:relative;
                                            
                                        }


                                        .toggle-password{

                                            position:absolute;
                                            
                                            top:50%;
                                            
                                            right:15px;
                                            
                                            transform:translateY(-50%);
                                            
                                            border:none;
                                            
                                            background:none;
                                            
                                            font-size:18px;
                                            
                                            color:#6b7280;
                                            
                                            cursor:pointer;
                                            
                                        }


                                        .add-user-btn{

                                            background:linear-gradient(90deg,#6d28d9,#7c3aed);
                                            
                                            color:#fff;
                                            
                                            padding:12px 30px;
                                            
                                            border:none;
                                            
                                            border-radius:14px;
                                            
                                            font-weight:600;
                                            
                                            transition:.3s;
                                            
                                        }


                                        .add-user-btn:hover{

                                            transform:translateY(-3px);
                                            
                                            box-shadow:0 10px 20px rgba(124,58,237,.30);
                                            
                                            color:#fff;
                                            
                                        }



                                        .user-table-card{
                                            border:0;
                                            border-radius:22px;
                                            overflow:hidden;
                                            box-shadow:0 12px 35px rgba(15,23,42,.08);
                                            background:#fff;
                                        }
                                        
                                        .user-table-card .card-header{
                                            background:linear-gradient(90deg,#6d28d9,#7c3aed);
                                            color:#fff;
                                            border:0;
                                            padding:18px 25px;
                                        }
                                        
                                        .user-table-card .card-header h5{
                                            margin:0;
                                            font-size:22px;
                                            font-weight:700;
                                        }


                                        #userTable{
                                            width:100%!important;
                                            border-collapse:separate;
                                            border-spacing:0;
                                        }
                                        
                                        #userTable thead th{
                                        
                                            background:#f8fafc;
                                        
                                            color:#374151;
                                        
                                            font-size:14px;
                                        
                                            font-weight:700;
                                        
                                            border-bottom:2px solid #e5e7eb;
                                        
                                            padding:18px 16px;
                                        
                                            white-space:nowrap;
                                        
                                        }
                                        
                                        #userTable tbody td{
                                        
                                            padding:18px 16px;
                                        
                                            vertical-align:middle;
                                        
                                            border-bottom:1px solid #edf2f7;
                                        
                                        }
                                        
                                        #userTable tbody tr{
                                        
                                            transition:.25s;
                                        
                                        }
                                        
                                        #userTable tbody tr:hover{
                                        
                                            background:#f8f7ff;
                                        
                                        }


                                        .user-avatar{

                                            width:46px;
                                        
                                            height:46px;
                                        
                                            border-radius:50%;
                                        
                                            background:linear-gradient(135deg,#6d28d9,#8b5cf6);
                                        
                                            color:#fff;
                                        
                                            display:flex;
                                        
                                            align-items:center;
                                        
                                            justify-content:center;
                                        
                                            font-size:18px;
                                        
                                            margin-right:12px;
                                        
                                            flex-shrink:0;
                                        
                                        }



                                        .user-name{

                                            font-weight:700;
                                        
                                            color:#1e293b;
                                        
                                            margin-bottom:2px;
                                        
                                        }
                                        
                                        .user-email{
                                        
                                            color:#64748b;
                                        
                                            font-size:13px;
                                        
                                        }


                                        .role-admin{

                                            background:#fee2e2;
                                        
                                            color:#dc2626;
                                        
                                        }
                                        
                                        .role-ranger{
                                        
                                            background:#fef3c7;
                                        
                                            color:#d97706;
                                        
                                        }
                                        
                                        .role-observer{
                                        
                                            background:#dbeafe;
                                        
                                            color:#2563eb;
                                        
                                        }
                                        
                                        .role-badge{
                                        
                                            display:inline-block;
                                        
                                            padding:6px 12px;
                                        
                                            border-radius:50px;
                                        
                                            font-size:12px;
                                        
                                            font-weight:700;
                                        
                                        }


                                        .status-active{

                                            background:#dcfce7;
                                        
                                            color:#15803d;
                                        
                                        }
                                        
                                        .status-inactive{
                                        
                                            background:#fee2e2;
                                        
                                            color:#dc2626;
                                        
                                        }
                                        
                                        .status-badge{
                                        
                                            display:inline-block;
                                        
                                            padding:6px 14px;
                                        
                                            border-radius:50px;
                                        
                                            font-size:12px;
                                        
                                            font-weight:700;
                                        
                                        }


                                        .you-badge{

                                            background:#06b6d4;
                                        
                                            color:#fff;
                                        
                                            font-size:11px;
                                        
                                            padding:4px 10px;
                                        
                                            border-radius:30px;
                                        
                                            margin-left:8px;
                                        
                                            font-weight:600;
                                        
                                        }


                                        .table-actions{

                                            display:flex;
                                        
                                            gap:8px;
                                        
                                        }
                                        
                                        .table-actions .btn{
                                        
                                            width:38px;
                                        
                                            height:38px;
                                        
                                            border-radius:10px;
                                        
                                            display:flex;
                                        
                                            align-items:center;
                                        
                                            justify-content:center;
                                        
                                            transition:.25s;
                                        
                                            padding:0;
                                        
                                        }
                                        
                                        .table-actions .btn:hover{
                                        
                                            transform:translateY(-3px);
                                        
                                        }


                                        .dt-buttons{

                                            margin-bottom:20px;
                                        
                                        }
                                        
                                        .dt-button{
                                        
                                            background:linear-gradient(90deg,#6d28d9,#7c3aed)!important;
                                        
                                            color:#fff!important;
                                        
                                            border:none!important;
                                        
                                            border-radius:10px!important;
                                        
                                            padding:8px 16px!important;
                                        
                                            margin-right:8px!important;
                                        
                                            font-size:14px!important;
                                        
                                            font-weight:600!important;
                                        
                                        }
                                        
                                        .dt-button:hover{
                                        
                                            opacity:.9;
                                        
                                        }



                                        .dataTables_filter input{

                                            border:2px solid #e5e7eb!important;
                                        
                                            border-radius:12px!important;
                                        
                                            padding:8px 14px!important;
                                        
                                            margin-left:10px!important;
                                        
                                        }
                                        
                                        .dataTables_filter input:focus{
                                        
                                            border-color:#7c3aed!important;
                                        
                                            box-shadow:none!important;
                                        
                                        }



                                        .dataTables_length select{

                                            border-radius:10px!important;
                                        
                                            border:2px solid #e5e7eb!important;
                                        
                                            padding:6px 32px 6px 12px!important;
                                        
                                        }


                                        .page-item.active .page-link{

                                            background:#7c3aed;
                                        
                                            border-color:#7c3aed;
                                        
                                        }
                                        
                                        .page-link{
                                        
                                            color:#7c3aed;
                                        
                                            border-radius:8px!important;
                                        
                                            margin:0 3px;
                                        
                                        }



                                        @media(max-width:768px){

                                            .dt-buttons{
                                            
                                            display:flex;
                                            
                                            flex-wrap:wrap;
                                            
                                            gap:10px;
                                            
                                            }
                                            
                                            .dt-button{
                                            
                                            margin:0!important;
                                            
                                            }
                                            
                                            .table-actions{
                                            
                                            justify-content:center;
                                            
                                            }
                                            
                                            }



                                            .custom-modal{

                                                border:none;
                                                
                                                border-radius:22px;
                                                
                                                overflow:hidden;
                                                
                                                box-shadow:0 20px 60px rgba(0,0,0,.18);
                                                
                                            }



                                            .modal-header-gradient{

                                                background:linear-gradient(135deg,#6d28d9,#7c3aed);
                                                
                                                color:#fff;
                                                
                                                padding:18px 25px;
                                                
                                                border:none;
                                                
                                            }


                                            .modal-header-gradient h5{

                                                font-weight:700;
                                                
                                                margin:0;
                                                
                                            }


                                            .modal-body{

                                                padding:30px;
                                                
                                            }


                                            .modal-footer{

                                                border:none;
                                                
                                                padding:20px 30px;
                                                
                                            }


                                            .save-btn{

                                                background:linear-gradient(135deg,#6d28d9,#7c3aed);
                                                
                                                color:#fff;
                                                
                                                padding:12px 28px;
                                                
                                                border:none;
                                                
                                                border-radius:12px;
                                                
                                                font-weight:600;
                                                
                                                }
                                                
                                                .save-btn:hover{
                                                
                                                color:#fff;
                                                
                                                transform:translateY(-2px);
                                                
                                                box-shadow:0 10px 20px rgba(124,58,237,.30);
                                                
                                            }