*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}


body{
    background:#f4f6f9;
    display:flex;
    color:#1e293b;
}


/* =====================
   SIDEBAR
===================== */

.sidebar{

    width:260px;
    height:100vh;

    background:#0f172a;

    position:fixed;
    left:0;
    top:0;

    padding:30px 20px;

}


.sidebar h2{

    color:white;

    margin-bottom:50px;

    letter-spacing:3px;

}


.sidebar a{

    display:block;

    color:#cbd5e1;

    padding:15px;

    margin-bottom:10px;

    border-radius:12px;

    text-decoration:none;

    cursor:pointer;

    transition:0.3s;

}


.sidebar a:hover,
.sidebar .active{

    background:#2563eb;

    color:white;

}



/* =====================
   MAIN
===================== */

.main{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:30px;

}



/* =====================
   HEADER
===================== */

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.header h1{

    font-size:30px;

}


.header p{

    color:#64748b;

}


.profile{

    display:flex;

    align-items:center;

    gap:15px;

    background:white;

    padding:10px 20px;

    border-radius:20px;

    box-shadow:0 5px 20px #0001;

}


.profile img{

    width:50px;

    height:50px;

    border-radius:50%;

    object-fit:cover;

}



/* =====================
   SENSOR CARD
===================== */

.cards{

    display:grid;

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

    gap:25px;

    margin-bottom:30px;

}


.card{

    background:white;

    padding:30px;

    border-radius:25px;

    box-shadow:0 10px 25px #0001;

}


.card h3{

    color:#64748b;

    margin-bottom:15px;

}


.card h1{

    font-size:42px;

}



/* =====================
   PANEL
===================== */


.panel{

    background:white;

    padding:30px;

    border-radius:25px;

    margin-bottom:30px;

    box-shadow:0 10px 25px #0001;

}


.panel h2{

    margin-bottom:20px;

}



/* =====================
   FUZZY STATUS
===================== */

.status-box{

    display:grid;

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

    gap:20px;

}


.status-box div{

    background:#f8fafc;

    padding:25px;

    border-radius:20px;

    text-align:center;

}


.status-box p{

    color:#64748b;

    margin-bottom:10px;

}


.status-box h2{

    font-size:32px;

}



/* =====================
   CHART
===================== */


.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


select{

    padding:10px 20px;

    border-radius:10px;

    border:1px solid #cbd5e1;

}


canvas{

    margin-top:20px;

    height:350px !important;

}



/* =====================
   RESPONSIVE
===================== */

@media(max-width:900px){


.sidebar{

    width:200px;

}


.main{

    margin-left:200px;

}


.cards,
.status-box{

    grid-template-columns:1fr;

}


}
/* =====================
   HISTORY DATA TABLE
===================== */


#historyTable{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:15px;

    font-size:14px;

}



#historyTable thead{

    background:#0f172a;

    color:white;

}



#historyTable th{

    padding:14px;

    text-align:center;

}



#historyTable td{

    padding:12px;

    text-align:center;

}



#historyTable tbody tr:nth-child(even){

    background:#f8fafc;

}



#historyTable tbody tr:nth-child(odd){

    background:white;

}



#historyTable tbody tr:hover{

    background:#e2e8f0;

}



/* =====================
   STATUS BADGE
===================== */


.badge{

    display:inline-block;

    min-width:70px;

    padding:5px 10px;

    border-radius:8px;

    color:white;

    font-size:12px;

    font-weight:bold;

}



.green{

    background:#16a34a;

}



.red{

    background:#dc2626;

}

/* =====================
   BUTTON STYLE
===================== */

button{

    padding:12px 25px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

}


button:hover{

    background:#1d4ed8;

    transform:scale(1.03);

}

/* =====================
   DATA LOGGER TABLE
===================== */


#dataLoggerTable{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}



#dataLoggerTable th{

    background:#0f172a;

    color:white;

    padding:14px;

    text-align:center;

}



#dataLoggerTable td{

    padding:12px;

    text-align:center;

    border-bottom:1px solid #e5e7eb;

}



#dataLoggerTable tr:nth-child(even){

    background:#f8fafc;

}



#dataLoggerTable tr:hover{

    background:#eef2ff;

}






/* STATUS BADGE */


#dataLoggerTable td:nth-child(5),
#dataLoggerTable td:nth-child(6),
#dataLoggerTable td:nth-child(7)
{

    font-weight:bold;

}






/* PAGINATION */


.pagination{

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



.pagination button{

    padding:12px 30px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-weight:bold;

    cursor:pointer;

}



.pagination button:hover{

    background:#1d4ed8;

}


/* =====================
   DATA LOGGER BUTTON
===================== */


button{

    padding:12px 25px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:0.3s;

}


/* START */

button[onclick="startRecord()"]{

    background:#16a34a;

    color:white;

}


button[onclick="startRecord()"]:hover{

    background:#15803d;

}



/* STOP */

button[onclick="stopRecord()"]{

    background:#dc2626;

    color:white;

}


button[onclick="stopRecord()"]:hover{

    background:#b91c1c;

}




/* RESET */

button[onclick="resetRecord()"]{

    background:#475569;

    color:white;

}


button[onclick="resetRecord()"]:hover{

    background:#334155;

}



/* =====================
   COMMUNICATION TABLE
===================== */


#communicationTable{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}



#communicationTable th{

    background:#0f172a;

    color:white;

    padding:14px;

    text-align:center;

}



#communicationTable td{

    padding:12px;

    text-align:center;

    border-bottom:1px solid #e5e7eb;

}



#communicationTable tr:nth-child(even){

    background:#f8fafc;

}


#communicationTable tr:hover{

    background:#eef2ff;

}


/* =====================
   STATUS BADGE
===================== */


.badge{

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;

}



.badge.green{

    background:#dcfce7;

    color:#166534;

}



.badge.red{

    background:#fee2e2;

    color:#991b1b;

}

/* =====================
 LOGIN PAGE
===================== */

.login-body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#0f172a;

}


.login-box{

width:400px;

padding:40px;

background:white;

border-radius:25px;

text-align:center;

}


.login-box input{

width:100%;

padding:15px;

margin-top:20px;

border-radius:10px;

border:1px solid #ccc;

}


.login-box button{

width:100%;

margin-top:25px;

background:#2563eb;

color:white;

}