/* Device List Styling */
.device-list {
    max-width: 960px;
    margin: 2rem auto;
}

.device {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
    background-color: white;
    transition: box-shadow 0.2s ease;
}

.device:hover {
    box-shadow: 0 2px 5px rgba(10, 10, 10, 0.2);
}

@keyframes opening-blink {
    0% { background-color: #ebffec }
    50% { background-color: #23d160 }
    100% { background-color: #ebffec }
}

.device.offline {
    background-color: #feecf0;
    border: 1px solid #f14668;
}

.device.opening {
    animation: opening-blink 1s infinite;
}

.device.idle {
    background-color: #ebffec;
    border: 1px solid #48c774;
}

.device.slow {
    background-color: #fff8e6;
    border: 1px solid #ffdd57;
}

.device h2 {
    color: #363636;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.device p {
    color: #4a4a4a;
    margin-bottom: 1.25rem;
}

.device .buttons {
    margin-top: 1rem;
    gap: 0.5rem;
}

/* Custom Button Styles */
.reset-button {
    background-color: #f14668 !important;
    color: white !important;
    border: none !important;
}

.reset-button:hover {
    background-color: #e64058 !important;
}

.open-button {
    background-color: #3298dc !important;
    color: white !important;
    border: none !important;
}

.open-button:hover {
    background-color: #2793da !important;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .device {
        margin: 1rem;
    }
    
    .device .buttons {
        display: flex;
        flex-direction: column;
    }
    
    .device .button {
        width: 100%;
        margin: 0.25rem 0;
    }
}