/* ==========================================================
   Endoacustica Dashboard
   Versione 1.0
========================================================== */

:root{

    --primary:#1f5eff;
    --primary-dark:#1949c7;

    --success:#16c784;
    --danger:#ef4444;
    --warning:#f59e0b;

    --bg:#f4f7fb;
    --card:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --sidebar-width:260px;

    --radius:16px;

    --shadow:
        0 4px 18px rgba(0,0,0,.05);

    --transition:.25s;

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-size:15px;

}

/***************************************************
LAYOUT
****************************************************/

.dashboard{

    display:flex;

    min-height:100vh;

}

/***************************************************
SIDEBAR
****************************************************/

.sidebar{

    width:var(--sidebar-width);

    background:#13223d;

    color:#fff;

    display:flex;

    flex-direction:column;

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    overflow:auto;

}

.logo{

    padding:0 20px 25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logo h2{

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

}

.logo span{

    color:#8ab5ff;

}

/***************************************************
MENU
****************************************************/

.menu{

    padding:20px 0;

}

.menu ul{

    list-style:none;

}

.menu li{

    margin:4px 0;

}

.menu a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#dbe4ff;

    padding:14px 30px;

    transition:var(--transition);

    font-weight:500;

}

.menu a:hover{

    background:rgba(255,255,255,.08);

    color:#fff;

}

.menu a.active{

    background:var(--primary);

    color:#fff;

    border-left:5px solid #fff;

}

.menu i{

    font-size:20px;

}

/***************************************************
MAIN
****************************************************/

.main{

    flex:1;

    margin-left:var(--sidebar-width);

    display:flex;

    flex-direction:column;

}

/***************************************************
TOPBAR
****************************************************/

.topbar{

    height:80px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    border-bottom:1px solid var(--border);

    box-shadow:0 2px 10px rgba(0,0,0,.03);

}

.page-title h1{

    font-size:28px;

    font-weight:700;

}

.page-title p{

    color:var(--text-light);

    margin-top:5px;

}

.device{

    display:flex;

    align-items:center;

    gap:20px;

}

.status{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

}

.battery{

    background:#eef5ff;

    padding:10px 16px;

    border-radius:30px;

    font-weight:600;

}

/***************************************************
CONTENT
****************************************************/

.content{

    padding:35px;

}

/***************************************************
GRID
****************************************************/

.grid{

    display:grid;

    gap:25px;

    width:100%;

    box-sizing:border-box;

}


.grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}


.grid-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}


.grid-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}



/***************************************************
RESPONSIVE GRID
****************************************************/


@media(max-width:1200px){

    .grid-4{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }


    .grid-3{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}



@media(max-width:800px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

}
/***************************************************
CARD
****************************************************/

.card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

}

.card h3{

    font-size:17px;

    margin-bottom:20px;

}

.card-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

/***************************************************
KPI
****************************************************/

.kpi{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.kpi h2{

    font-size:34px;

    margin-bottom:5px;

}

.kpi small{

    color:var(--text-light);

}

.kpi i{

    font-size:38px;

    color:var(--primary);

}

/***************************************************
TABLE
****************************************************/

table{

    width:100%;

    border-collapse:collapse;

}

th{

    text-align:left;

    padding:15px;

    border-bottom:1px solid var(--border);

    color:var(--text-light);

    font-weight:600;

}

td{

    padding:15px;

    border-bottom:1px solid #f2f2f2;

}

/***************************************************
BUTTONS
****************************************************/

.btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-light{

    background:#eef3ff;

    color:var(--primary);

}

/***************************************************
BADGE
****************************************************/

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:#dcfce7;

    color:#166534;

}

.badge-danger{

    background:#fee2e2;

    color:#991b1b;

}

/***************************************************
RESPONSIVE
****************************************************/

@media(max-width:1100px){

.grid-4{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:1fr;

}

.grid-2{

    grid-template-columns:1fr;

}

}

@media(max-width:900px){

.sidebar{

    width:85px;

}

.sidebar .text{

    display:none;

}

.main{

    margin-left:85px;

}

.logo h2{

    font-size:0;

}

.logo h2::after{

    content:"EA";

    font-size:22px;

}

}

@media(max-width:650px){

.topbar{

    flex-direction:column;

    height:auto;

    padding:20px;

    gap:15px;

}

.content{

    padding:20px;

}

.grid-4{

    grid-template-columns:1fr;

}

}

/***************************************************
SIDEBAR FOOTER
****************************************************/

.sidebar-footer{

    margin-top:auto;

    padding:25px;

    border-top:1px solid rgba(255,255,255,.08);

}

.device-box{

    display:flex;

    align-items:center;

    gap:15px;

}

.device-icon{

    width:48px;

    height:48px;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.device-box strong{

    color:#fff;

    font-size:15px;

}

.device-box small{

    color:#bfc8dd;

}

.online-dot{

    display:inline-block;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#16c784;

    margin-right:6px;

}


/***************************************************
TOPBAR RIGHT
****************************************************/

.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.sync-box,
.battery-box,
.signal-box,
.device-info{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

}

.sync-box i,
.battery-box i{

    color:var(--primary);

    font-size:18px;

}

.sync-box strong{

    display:block;

    font-size:13px;

}

.sync-box span{

    font-size:13px;

    color:var(--text-light);

}

.battery-box{

    background:#eef5ff;

    padding:10px 15px;

    border-radius:30px;

    font-weight:600;

}

.signal-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#16c784;

}

.signal-box{

    font-weight:600;

}

.device-info{

    gap:12px;

    padding-left:20px;

    border-left:1px solid var(--border);

}

.device-info i{

    font-size:26px;

    color:var(--primary);

}

.device-info strong{

    display:block;

    font-size:14px;

}

.device-info small{

    color:var(--text-light);

}

@media(max-width:900px){

.topbar-right{

    flex-wrap:wrap;

    justify-content:flex-end;

}

.device-info{

    display:none;

}

}

@media(max-width:650px){

.topbar{

    align-items:flex-start;

}

.topbar-right{

    width:100%;

    justify-content:space-between;

}

.sync-box{

    display:none;

}

}

/***************************************************
HOME
****************************************************/

.fake-map{

    height:260px;

    background:#edf3ff;

    border-radius:14px;

    position:relative;

    overflow:hidden;

    margin-bottom:20px;

}

.map-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(#d9e5ff 1px, transparent 1px),

        linear-gradient(90deg,#d9e5ff 1px,transparent 1px);

    background-size:40px 40px;

}

.map-marker{

    position:absolute;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ff3b30;

    left:58%;

    top:42%;

    transform:translate(-50%,-50%);

    box-shadow:0 0 0 12px rgba(255,59,48,.18);

}

.progress{

    width:100%;

    height:10px;

    background:#edf1f7;

    border-radius:20px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    background:var(--primary);

    border-radius:20px;

}

/***************************************************
GPS PAGE
****************************************************/

.gps-map{

    height:430px;

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#edf4ff;

}

.gps-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(#d9e4ff 1px,transparent 1px),

    linear-gradient(90deg,#d9e4ff 1px,transparent 1px);

    background-size:40px 40px;

}

.gps-route{

    position:absolute;

    left:15%;

    top:20%;

    width:60%;

    height:45%;

    border:4px solid #4f7cff;

    border-color:#4f7cff transparent transparent transparent;

    border-radius:50%;

    transform:rotate(18deg);

}

.gps-marker{

    position:absolute;

    left:66%;

    top:48%;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ff3b30;

    transform:translate(-50%,-50%);

    box-shadow:0 0 0 15px rgba(255,59,48,.20);

    animation:gpsPulse 2s infinite;

}

@keyframes gpsPulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,59,48,.40);

    }

    70%{

        box-shadow:0 0 0 20px rgba(255,59,48,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,59,48,0);

    }

}

#gpsMap{
    width:100%;
    height:500px;
    border-radius:16px;
    overflow:hidden;
}

/***************************************************
CALLS
****************************************************/

.calls-layout{

    display:grid;
    grid-template-columns:280px 1fr;
    gap:25px;

}

.filter-btn{

    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    border:none;
    background:#eef4ff;
    color:#1f5eff;
    padding:14px 18px;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:12px;
    transition:.2s;

}

.filter-btn:hover{

    background:#dce8ff;

}

.filter-btn.active{

    background:#1f5eff;
    color:#fff;

}

.calls-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.call-item{

    display:grid;
    grid-template-columns:60px 1fr 170px 110px 55px;
    align-items:center;
    gap:20px;
    padding:18px;
    border:1px solid #edf1f7;
    border-radius:14px;
    transition:.25s;

}

.call-item:hover{

    background:#f8fbff;

}

.call-avatar{

    width:50px;
    height:50px;
    border-radius:50%;
    background:#eef4ff;
    color:#1f5eff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;

}

.call-avatar.missed{

    background:#fee2e2;
    color:#dc2626;

}

.call-info strong{

    display:block;
    font-size:15px;

}

.call-info small{

    color:#6b7280;

}

.call-type{

    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;

}

.call-type.incoming{

    color:#16a34a;

}

.call-type.outgoing{

    color:#2563eb;

}

.call-type.missed{

    color:#dc2626;

}

.call-time{

    font-weight:600;
    text-align:center;

}

.call-time small{

    display:block;
    margin-top:4px;
    color:#6b7280;
    font-weight:400;

}

.play-btn{

    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#eef4ff;
    color:#1f5eff;
    cursor:pointer;
    font-size:20px;
    transition:.2s;

}

.play-btn:hover{

    background:#1f5eff;
    color:#fff;

}

.play-btn.disabled{

    background:#f5f5f5;
    color:#bbb;
    cursor:default;

}

@media(max-width:1100px){

.calls-layout{

grid-template-columns:1fr;

}

.call-item{

grid-template-columns:50px 1fr;

}

.call-type,
.call-time,
.play-btn{

margin-top:12px;

}

}

/***************************************************
MESSAGES
****************************************************/

.messages-layout{

    display:grid;
    grid-template-columns:330px 1fr;
    gap:25px;

}

.conversation{

    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
    margin-bottom:10px;

}

.conversation:hover{

    background:#f5f8ff;

}

.conversation.active{

    background:#eef4ff;

}

.avatar{

    width:46px;
    height:46px;
    border-radius:50%;
    background:#2962ff;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
    font-size:18px;

}

.avatar.big{

    width:58px;
    height:58px;
    font-size:22px;

}

.conversation strong{

    display:block;
    font-size:15px;

}

.conversation small{

    color:#777;

}

.chat-header{

    display:flex;
    align-items:center;
    gap:18px;
    padding-bottom:20px;
    border-bottom:1px solid #eee;
    margin-bottom:20px;

}

.chat-window{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.message{

    max-width:70%;
    padding:14px 18px;
    border-radius:18px;
    position:relative;
    font-size:15px;
    line-height:1.5;

}

.message span{

    display:block;
    margin-top:8px;
    font-size:12px;
    opacity:.65;

}

.message.received{

    background:#f2f4f7;
    align-self:flex-start;

}

.message.sent{

    background:#2962ff;
    color:#fff;
    align-self:flex-end;

}

@media(max-width:1100px){

.messages-layout{

grid-template-columns:1fr;

}

.message{

max-width:90%;

}

}

/***************************************************
PHOTOS
****************************************************/

.photo-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;

}


.photo-card{

    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#f5f5f5;
    width:100%;
    aspect-ratio:1 / 1;

}


.photo-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}


.photo-overlay{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

}


.photo-btn{

    width:40px;
    height:40px;

    border-radius:50%;
    border:0;

    display:flex;
    align-items:center;
    justify-content:center;

}


@media(max-width:1200px){

    .photo-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:800px){

    .photo-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:500px){

    .photo-grid{
        grid-template-columns:1fr;
    }

}

/***************************************************
AUDIO
****************************************************/


.audio-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}


.audio-item{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px;

    border:1px solid #edf1f7;

    border-radius:15px;

    transition:.25s;

}


.audio-item:hover{

    background:#f8fbff;

}



.audio-icon{

    width:55px;
    height:55px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef4ff;

    color:#2962ff;

    font-size:24px;

    margin-right:18px;

}



.audio-info{

    flex:1;

}


.audio-info strong{

    display:block;

    font-size:16px;

    margin-bottom:5px;

}


.audio-info small{

    color:#6b7280;

}



.audio-actions{

    display:flex;

    gap:10px;

}



.audio-play,
.audio-download{

    width:42px;
    height:42px;

    border-radius:50%;

    border:none;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size:18px;

}



.audio-play{

    background:#2962ff;

    color:#fff;

}



.audio-download{

    background:#eef4ff;

    color:#2962ff;

}



.audio-player{

    display:flex;

    align-items:center;

    gap:25px;

    padding:25px;

    background:#f8fbff;

    border-radius:16px;

}



.audio-player > i{

    font-size:45px;

    color:#2962ff;

}



.audio-player div{

    flex:1;

}



.audio-player strong{

    display:block;

    font-size:17px;

}



.audio-player small{

    color:#6b7280;

    display:block;

    margin-top:5px;

}



@media(max-width:700px){


    .audio-item{

        flex-wrap:wrap;

        gap:15px;

    }


    .audio-actions{

        width:100%;

        justify-content:flex-end;

    }


    .audio-player{

        flex-wrap:wrap;

    }


}



/***************************************************
AUDIO FIX
****************************************************/

.audio-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}


.audio-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}


.audio-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#eef4ff;
    color:#2962ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-right:20px;
}


.audio-info{
    flex:1;
}


.audio-info strong{
    display:block;
    font-size:16px;
}


.audio-info small{
    color:#777;
}


.audio-actions{
    display:flex;
    gap:10px;
}


.audio-play,
.audio-download{

    width:42px;
    height:42px;

    border-radius:50%;
    border:0;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

}


.audio-play{
    background:#2962ff;
    color:white;
}


.audio-download{
    background:#eef4ff;
    color:#2962ff;
}


.audio-player{

    display:flex;
    align-items:center;
    gap:20px;

    padding:20px;

    background:#f8fbff;
    border-radius:16px;

}

/***************************************************
FILES
****************************************************/


.file-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}



.file-item{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px;

    background:#f8faff;

    border-radius:14px;

    transition:.2s;

}



.file-item:hover{

    background:#eef4ff;

}



.file-icon{

    width:45px;
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#e8f0ff;

    color:#2563eb;

    font-size:22px;

    margin-right:15px;

}



.file-info{

    flex:1;

    display:flex;
    flex-direction:column;

}



.file-info strong{

    font-size:16px;

}



.file-info small{

    margin-top:5px;

    color:#6b7280;

}



.file-btn{

    width:40px;
    height:40px;

    border:0;

    border-radius:50%;

    background:#2563eb;

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}



.file-btn:hover{

    opacity:.85;

}

/***************************************************
APPLICATIONS
****************************************************/


.app-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}



.app-item{

    display:flex;
    align-items:center;

    padding:18px;

    background:#f8faff;

    border-radius:14px;

    transition:.2s;

}



.app-item:hover{

    background:#eef4ff;

}



.app-icon{

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#e8f0ff;

    color:#2563eb;

    font-size:24px;

    margin-right:18px;

}



.app-info{

    flex:1;

    display:flex;
    flex-direction:column;

}



.app-info strong{

    font-size:17px;

    color:#1f2937;

}



.app-info small{

    margin-top:5px;

    color:#6b7280;

}



.app-btn{

    width:42px;
    height:42px;

    border:0;

    border-radius:50%;

    background:#2563eb;

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;
    justify-content:center;

}



.app-btn:hover{

    opacity:.85;

}

/***************************************************
BROWSER
****************************************************/


.browser-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}



.browser-item{

    display:flex;
    align-items:center;

    padding:18px;

    background:#f8faff;

    border-radius:14px;

    transition:.2s;

}



.browser-item:hover{

    background:#eef4ff;

}



.browser-icon{

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#e8f0ff;

    color:#2563eb;

    font-size:24px;

    margin-right:18px;

}



.browser-info{

    flex:1;

    display:flex;
    flex-direction:column;

}



.browser-info strong{

    font-size:16px;

    color:#1f2937;

}



.browser-info small{

    margin-top:5px;

    color:#6b7280;

}



.browser-time{

    font-weight:600;

    color:#2563eb;

}



.bookmark-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

}



.bookmark{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    padding:18px;

    background:#f8faff;

    border-radius:14px;

    color:#2563eb;

    font-weight:600;

}



.bookmark i{

    color:#f59e0b;

}



@media(max-width:900px){

    .bookmark-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:600px){

    .browser-item{

        flex-wrap:wrap;

    }

    .browser-time{

        width:100%;

        margin-top:10px;

    }

}

/***************************************************
STATS
****************************************************/


.stats-bars{

    display:flex;
    flex-direction:column;
    gap:22px;

}



.stat-row{

    display:grid;
    grid-template-columns:100px 1fr 50px;
    align-items:center;
    gap:15px;

}



.stat-row span{

    font-weight:600;
    color:#374151;

}



.stat-row strong{

    text-align:right;
    color:#2563eb;

}



.progress{

    height:10px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

}



.progress div{

    height:100%;

    background:#2563eb;

    border-radius:20px;

}





.usage-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}



.usage-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:15px;

    background:#f8faff;

    border-radius:14px;

}



.usage-item i{

    width:45px;
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#e8f0ff;

    color:#2563eb;

    font-size:22px;

}



.usage-item strong{

    display:block;

    font-size:16px;

}



.usage-item small{

    color:#6b7280;

}



@media(max-width:900px){


    .stat-row{

        grid-template-columns:1fr;

        gap:8px;

    }


    .stat-row strong{

        text-align:left;

    }


}

/***************************************************
SIDEBAR MENU
****************************************************/

.sidebar{
    width:260px;
    background:#111c35;
    color:white;
    min-height:100vh;
    padding:30px 0;
}


.logo{
    padding:0 30px 35px;
    border-bottom:1px solid rgba(255,255,255,.1);
}


.logo strong{
    display:block;
    font-size:20px;
    color:white;
}


.logo span{
    display:block;
    font-size:14px;
    color:#9da8c5;
    margin-top:5px;
}



/* TITOLI SEZIONE */

.menu-title{

    padding:20px 20px 8px;

    font-size:13px;

    font-weight:700;

    color:#3b82f6;

    text-transform:uppercase;

}



/* LINK */

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:10px 20px;

    color:#d8deef;

    text-decoration:none;

    font-size:16px;

    transition:.2s;

}


.sidebar{
    width:260px;
}
.sidebar nav a i{

    width:20px;

    text-align:center;

    font-size:16px;

}



.sidebar nav a:hover{

    background:rgba(255,255,255,.08);

    color:white;

}



.sidebar nav a.active{

    background:#2563eb;

    color:white;

}

/***************************************************
SIM INFORMATION
****************************************************/


/* Lista informazioni SIM */

.info-list{

    display:flex;
    flex-direction:column;
    gap:14px;

}


.info-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #edf0f5;

}


.info-row:last-child{

    border-bottom:0;

}


.info-row span{

    color:#64748b;

    font-size:15px;

}


.info-row strong{

    font-weight:600;

    color:#1e293b;

}


/* Stato online */

.online{

    color:#16a34a !important;

}


/***************************************************
SIM DATA STATS
****************************************************/


.data-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:10px;

}


.data-stats div{

    background:#f8fafc;

    border-radius:14px;

    padding:22px;

    text-align:center;

}


.data-stats strong{

    display:block;

    font-size:24px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:8px;

}


.data-stats span{

    color:#64748b;

    font-size:14px;

}


/***************************************************
NETWORK TABLE
****************************************************/


.network-table{

    width:100%;

    border-collapse:collapse;

    margin-top:10px;

}


.network-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

    font-weight:600;

    font-size:14px;

    border-bottom:1px solid #e5e7eb;

}


.network-table td{

    padding:15px;

    border-bottom:1px solid #f1f5f9;

    font-size:15px;

}


.network-table tr:last-child td{

    border-bottom:0;

}


/***************************************************
SIM KPI RESPONSIVE
****************************************************/


@media(max-width:900px){


.data-stats{

    grid-template-columns:1fr;

}


.info-row{

    flex-direction:column;

    align-items:flex-start;

    gap:5px;

}


}


/***************************************************
CONTACTS
****************************************************/


.contacts-search{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8fafc;

    padding:14px 18px;

    border-radius:12px;

    margin-bottom:25px;

}


.contacts-search i{

    color:#64748b;

}


.contacts-search input{

    border:0;

    outline:none;

    background:transparent;

    width:100%;

    font-size:15px;

}



.contacts-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.contact-item{

    display:flex;

    align-items:center;

    padding:16px;

    border-radius:14px;

    background:#f8fafc;

    transition:.2s;

}


.contact-item:hover{

    background:#eef4ff;

}



.contact-info{

    flex:1;

    margin-left:15px;

}


.contact-info strong{

    display:block;

    font-size:16px;

}


.contact-info small{

    color:#64748b;

}



.contact-actions{

    display:flex;

    gap:10px;

}


.contact-actions button{

    width:38px;

    height:38px;

    border-radius:50%;

    border:0;

    background:#2563eb;

    color:white;

    cursor:pointer;

}


.contact-actions button:hover{

    opacity:.85;

}

/***************************************************
GPS ROUTES MAP
****************************************************/


#route-map{

    width:100%;

    height:280px;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:20px;

    background:#eef4ff;

}



/***************************************************
ROUTE INFO
****************************************************/


.route-info{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-top:20px;

}



.route-info div{

    background:#f8fafc;

    border-radius:12px;

    padding:15px;

}



.route-info span{

    display:block;

    color:#64748b;

    font-size:13px;

    margin-bottom:5px;

}



.route-info strong{

    font-size:16px;

}



/***************************************************
LEAFLET FIX
****************************************************/


#route-map .leaflet-container{

    font-family:inherit;

}



.leaflet-popup-content{

    font-size:14px;

}



/***************************************************
RESPONSIVE
****************************************************/


@media(max-width:900px){


    .route-info{

        grid-template-columns:1fr 1fr;

    }


}



@media(max-width:600px){


    .route-info{

        grid-template-columns:1fr;

    }


}
/***************************************************
GEOFENCE
****************************************************/


#geofence-map{

    width:100%;

    height:280px;

    border-radius:16px;

    overflow:hidden;

    background:#eef4ff;

    margin-bottom:10px;

}



/***************************************************
GEOFENCE LIST
****************************************************/


.geo-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.geo-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:#f8fafc;

    padding:16px;

    border-radius:14px;

}



.geo-icon{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

}



.geo-name{

    flex:1;

}



.geo-name strong{

    display:block;

    font-size:16px;

}



.geo-name small{

    display:block;

    margin-top:4px;

    color:#64748b;

}



.geo-active{

    color:#16a34a;

    font-weight:600;

}



.geo-off{

    color:#94a3b8;

    font-weight:600;

}



/***************************************************
LEAFLET FIX
****************************************************/


#geofence-map .leaflet-container{

    width:100%;

    height:100%;

    font-family:inherit;

}



.leaflet-popup-content{

    font-size:14px;

}



/***************************************************
GEOFENCE TABLE
****************************************************/


.geo-table{

    width:100%;

    border-collapse:collapse;

}



.geo-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

    border-bottom:1px solid #e5e7eb;

}



.geo-table td{

    padding:15px;

    border-bottom:1px solid #f1f5f9;

}



.geo-green{

    color:#16a34a;

    font-weight:600;

}



/***************************************************
RESPONSIVE
****************************************************/


@media(max-width:900px){


    .geo-item{

        padding:14px;

    }


}


@media(max-width:600px){


    .geo-table{

        font-size:14px;

    }


}
/***************************************************
MEMORY
****************************************************/


.memory-card{

    min-height:260px;

}



.memory-bar{

    width:100%;

    height:22px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

    margin:35px 0;

}



.memory-bar-fill{

    width:44%;

    height:100%;

    background:#2563eb;

    border-radius:20px;

}



.memory-summary{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.memory-summary div{

    background:#f8fafc;

    padding:18px;

    border-radius:14px;

}



.memory-summary small{

    display:block;

    color:#64748b;

    margin-bottom:6px;

}



.memory-summary strong{

    font-size:20px;

}



.memory-category{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #edf0f5;

}



.memory-category:last-child{

    border-bottom:0;

}



.memory-category div{

    display:flex;

    align-items:center;

    gap:12px;

}



.memory-category i{

    color:#2563eb;

    font-size:18px;

}



.memory-category strong{

    font-weight:600;

}



.memory-table{

    width:100%;

    border-collapse:collapse;

}



.memory-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

    border-bottom:1px solid #e5e7eb;

}



.memory-table td{

    padding:15px;

    border-bottom:1px solid #f1f5f9;

}



.memory-table i{

    color:#2563eb;

    margin-right:8px;

}


/***************************************************
HEALTH FIX
****************************************************/


.health-card{

    min-height:280px;

}



.health-row{

    display:flex;

    justify-content:space-between;

    margin-top:18px;

    font-size:15px;

}



.health-progress{

    height:10px;

    background:#e8edf5;

    border-radius:20px;

    overflow:hidden;

    margin-top:8px;

}



.health-progress div{

    height:100%;

    background:#2563eb;

    border-radius:20px;

}



.device-info-row{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid #edf0f5;

}



.device-info-row:last-child{

    border-bottom:0;

}



.device-info-row span{

    color:#64748b;

}


/***************************************************
LIVE FIX
****************************************************/


.live-card{

    min-height:280px;

}



/* Lista funzioni live */

.live-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.live-item:last-child{

    border-bottom:0;

}



.live-item div{

    display:flex;

    align-items:center;

    gap:12px;

}



.live-item i{

    color:#2563eb;

    font-size:18px;

}



.live-status{

    background:#f1f5f9;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

}



.live-status.active{

    background:#dcfce7;

    color:#16a34a;

}




/* Controlli avanzati */


.control-box{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.control-box:last-child{

    border-bottom:0;

}



.control-box > i{

    font-size:22px;

    color:#2563eb;

}



.control-box div{

    flex:1;

}



.control-box strong{

    display:block;

}



.control-box small{

    display:block;

    color:#64748b;

    margin-top:4px;

}



.control-box .btn{

    margin-left:auto;

}



/* Tabella eventi */


.live-table{

    width:100%;

    border-collapse:collapse;

}



.live-table th{

    padding:15px;

    text-align:left;

    color:#64748b;

}



.live-table td{

    padding:15px;

    border-top:1px solid #edf0f5;

}



.live-table i{

    color:#2563eb;

    margin-right:10px;

}


/***************************************************
KEYLOGGER
****************************************************/


.key-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.key-item:last-child{

    border-bottom:0;

}



.key-item i{

    color:#2563eb;

    font-size:20px;

}



.key-item span{

    flex:1;

}



.key-event{

    display:flex;

    gap:20px;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.key-event span{

    color:#64748b;

    width:60px;

}



.key-table{

    width:100%;

    border-collapse:collapse;

}



.key-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

}



.key-table td{

    padding:15px;

    border-top:1px solid #edf0f5;

}



.key-table i{

    color:#2563eb;

    margin-right:10px;

}


/***************************************************
SCHEDULER
****************************************************/


.schedule-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #edf0f5;

}



.schedule-item > div{

    display:flex;

    align-items:center;

    gap:15px;

}



.schedule-item i{

    font-size:20px;

    color:#2563eb;

}



.schedule-item small{

    display:block;

    color:#64748b;

    margin-top:4px;

}



.schedule-active,
.schedule-off{

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

}



.schedule-active{

    background:#dcfce7;

    color:#16a34a;

}



.schedule-off{

    background:#f1f5f9;

    color:#64748b;

}



.schedule-box{

    height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.schedule-box i{

    font-size:30px;

    color:#2563eb;

    margin-right:10px;

}



.schedule-box p{

    color:#64748b;

}



.schedule-table{

    width:100%;

    border-collapse:collapse;

}



.schedule-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

}



.schedule-table td{

    padding:15px;

    border-top:1px solid #edf0f5;

}



.schedule-table i{

    color:#2563eb;

    margin-right:10px;

}

/***************************************************
SCHEDULER IMPROVEMENTS
****************************************************/


.schedule-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #edf0f5;

}


.schedule-item:last-child{

    border-bottom:none;

}



.schedule-item > div{

    display:flex;
    align-items:center;
    gap:14px;

}



.schedule-item i{

    width:24px;

    font-size:20px;

    color:#2563eb;

}



.schedule-item strong{

    display:block;

    font-size:16px;

}



.schedule-item small{

    display:block;

    margin-top:3px;

    color:#64748b;

}



.schedule-active,
.schedule-off{

    font-size:13px;

    padding:6px 16px;

    border-radius:20px;

}



.schedule-active{

    background:#dcfce7;

    color:#16a34a;

}



.schedule-off{

    background:#f1f5f9;

    color:#64748b;

}



/* BOX NUOVA PROGRAMMAZIONE */


.schedule-box{

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.schedule-box > div{

    display:flex;

    align-items:center;

    gap:12px;

}



.schedule-box i{

    font-size:34px;

    color:#2563eb;

}



.schedule-box strong{

    font-size:18px;

}



.schedule-box p{

    color:#64748b;

    margin:12px 0 20px;

}



.schedule-box .btn{

    padding:12px 28px;

    border-radius:10px;

}


/***************************************************
HISTORY
****************************************************/


.history-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.history-item i{

    color:#2563eb;

    font-size:20px;

}



.history-item strong{

    display:block;

}



.history-item small{

    color:#64748b;

}



.site-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #edf0f5;

}



.site-row span{

    display:flex;

    align-items:center;

    gap:10px;

}



.site-row i{

    color:#2563eb;

}



.history-table{

    width:100%;

    border-collapse:collapse;

}



.history-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

}



.history-table td{

    padding:15px;

    border-top:1px solid #edf0f5;

}



/***************************************************
BLOCKED SITES
****************************************************/


.blocked-item{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #edf0f5;

}



.blocked-item > div{

    display:flex;

    align-items:center;

    gap:15px;

}



.blocked-item i{

    font-size:20px;

    color:#2563eb;

}



.blocked-item strong{

    display:block;

}



.blocked-item small{

    display:block;

    color:#64748b;

}



.blocked-active{

    background:#fee2e2;

    color:#dc2626;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

}



.category-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid #edf0f5;

}



.category-row span{

    display:flex;

    align-items:center;

    gap:10px;

}



.category-row i{

    color:#2563eb;

}



.category-row strong{

    color:#16a34a;

}



.blocked-table{

    width:100%;

    border-collapse:collapse;

}



.blocked-table th{

    text-align:left;

    padding:15px;

    color:#64748b;

}



.blocked-table td{

    padding:15px;

    border-top:1px solid #edf0f5;

}



/***************************************************
HOME GPS MAP
****************************************************/


#home-map{

    width:100%;

    height:280px;

    border-radius:14px;

    overflow:hidden;

    margin-bottom:20px;

}



.gps-home-card table{

    width:100%;

}



.gps-home-card td:first-child{

    color:#64748b;

    width:45%;

}



.gps-home-card td{

    padding:12px 15px;

}