.log-table {
    width: 100%;
    font-family: Arial, sans-serif;
    margin-bottom: 40px;
}

.log-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.log-row:nth-child(even) {
    background: #f8f9fa;
}

.log-row:hover {
    background: #eef5ff;
}

.log-header {
    background: #2c3e50;
    color: white;
    font-weight: bold;
}

.log-col {
    padding: 8px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

/* tailles colonnes */

.devices { flex: 0 0 250px; }
.type { flex: 2; }
.start { flex: 1; }
.idstart { flex: 1; }
.end { flex: 1; }
.idend { flex: 1; }
.duration { flex: 2; }
.action { flex: 0 0 200px; }

.device-badge {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 4px;
}

.year-title {
    margin-top: 40px;
    font-family: Arial;
    border-left: 5px solid #3498db;
    padding-left: 10px;
}

.alert::before{
    content: "Alerte";
    display: inline-block;
    background: #fc8501;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 4px;
}
.error::before{
    content: "Erreur";
    display: inline-block;
    background: #f41d1d;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 4px;
}
.duration-hms{
    display: inline-block;
    background: #97bf16;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 4px;
}