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

body{
background:#0b1220;
color:#fff;
}

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

height:60px;
padding:0 20px;

background:#0f172a;
border-bottom:1px solid #1f2937;
}

/* logo */
.logo{
color:#4da3ff;
font-weight:bold;
font-size:18px;
}

/* menu */
.menu{
display:flex;
align-items:center;
gap:18px;
}

/* link */
.menu a{
color:#e5e7eb;
text-decoration:none;
font-size:14px;
padding:6px 8px;
border-radius:6px;
transition:0.2s;
}

.menu a:hover{
background:#1f2937;
color:#fff;
}

/* APP */
.app{
display:flex;
height:calc(100vh - 60px);
}

/* SIDEBAR */
.sidebar{
width:250px;
background:#111827;
padding:20px;
overflow:auto;
}

.sidebar h3{
margin-bottom:15px;
color:#9ca3af;
font-size:14px;
}

.sidebar a,
.device-item{
display:block;
padding:10px;
margin-bottom:8px;
background:#1f2937;
border-radius:6px;
cursor:pointer;
text-decoration:none;
color:#fff;
}

.sidebar a:hover,
.device-item:hover{
background:#2563eb;
}

/* MAIN */
.main{
flex:1;
padding:20px;
overflow:auto;
}

/* FILTER */
.filter-bar{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}

.filter-bar input{
padding:8px;
border-radius:6px;
border:none;
}

.filter-bar button{
padding:8px 12px;
border:none;
border-radius:6px;
background:#2563eb;
color:#fff;
cursor:pointer;
}

/* TABLE */
.table{
width:100%;
border-collapse:collapse;
background:#1f2937;
}

.table th,
.table td{
padding:10px;
border-bottom:1px solid #374151;
}

.table th{
color:#9ca3af;
text-align:left;
}

.table tr:hover{
background:#111827;
}

/* PAYLOAD */
.payload{
max-width:300px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}