.sidebar {
    width: 260px;
    background: #0f172a;
    overflow-y: auto;
    border-right: 1px solid #29303d;
}

.sidebar-device {

    cursor: pointer;
}

.sidebar-title {

    margin: 12px;

    margin-top: 16px;

    margin-bottom: 4px;

    padding-left: 12px;

    color: #d1d5db;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    opacity: 0.9;
}

.sidebar-device {

    margin: 12px;

    padding: 12px;

    border-radius: 8px;

    background: #0f172a;

    border: 1px solid rgba(94, 234, 212, 0.25);

    box-shadow:
        0 0 6px rgba(94, 234, 212, 0.08),
        inset 0 0 4px rgba(255,255,255,0.03);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.sidebar-device:hover {

    border-color: rgba(94, 234, 212, 0.55);

    box-shadow:
        0 0 10px rgba(94, 234, 212, 0.18),
        inset 0 0 6px rgba(255,255,255,0.05);
}


.device-card-title {

    color: #5eead4;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-shadow:
        0 0 6px rgba(94,234,212,0.35);
}

/*.sidebar-device-title {

    color: white;

    font-size: 14px;

    font-weight: bold;
}*/

.sidebar-device-title {

    color: #5eead4;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-shadow:
        0 0 6px rgba(94,234,212,0.35);
}

.sidebar-device-id {

    color: #94a3b8;

    font-size: 11px;

    margin-top: 4px;

    margin-bottom: 10px;

    word-break: break-all;
}

.sidebar-device-prop {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 6px;

    padding: 6px;

    border-radius: 6px;

    background: #10243B;

    border: 1px solid rgba(255,255,255,0.08);

    color: white;

    font-size: 12px;
}

.sidebar-device-prop {

    transition:
        border-color 0.2s,
        background 0.2s;
}

.sidebar-device-prop:hover {

    background: #13304d;

    border-color:
        rgba(94,234,212,0.18);
}

.device-card
{
    transition:
        box-shadow 0.25s,
        transform 0.25s;
}

.device-card-highlight
{
    box-shadow:
        0 0 18px teal;

    transform:
        scale(1.03);
}



.device-card-footer
{
    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.device-card-actions
{
    display: flex;

    align-items: center;

    gap: 8px;
}

.device-icon-btn
{
    width: 28px;

    height: 28px;

    border: none;

    border-radius: 6px;

    background: #1e293b;

    color: white;

    cursor: pointer;

    font-size: 14px;

    transition: 0.2s;
}

.device-icon-btn:hover
{
    background: #334155;
}

.delete-btn:hover
{
    background: #7f1d1d;
}

.device-status-pill
{
    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 600;
}

.device-status-pill.online
{
    background: #064e3b;

    color: #5eead4;
}

.device-status-pill.offline
{
    background: #7f1d1d;

    color: #fecaca;
}





.device-prop-right
{
    display: flex;
    align-items: center;
    gap: 5px;
}

.device-prop-age
{
    font-size: 10px;
    /*color: #94a3b8;*/
     color: #5eead4;
    min-width: auto;
    text-align: right;
}

.device-prop-value
{
    margin-right: 2px;
}





.device-action
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.device-action-btn
{
    padding: 7px 12px;

    background: #0ea5e9;

    border: none;

    border-radius: 6px;

    color: white;

    cursor: pointer;
}

.device-actions-container
{
    margin-top: 16px;
    /*padding-top: 12px;
    border-top: 1px solid #ddd;*/
}












.device-card-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:12px;
}


.device-card-header-left {

    flex:1;

    min-width:0;
}

.device-menu-btn {

    width:28px;

    height:28px;

    border:none;

    border-radius:6px;

    background:transparent;

    color:#94a3b8;

    cursor:pointer;

    font-size:22px;

    line-height:22px;

    transition:background .15s;
}

.device-menu-btn:hover {

    background:#1e293b;

    color:white;
}

.device-card-footer {

    display:flex;

    justify-content:flex-end;

    margin-top:12px;
}