.online-calendar {
    width: 100%;
    overflow-x: auto;
    font-family: Arial, sans-serif;
}

.calendar-row {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.calendar-hours {
    font-size: 12px;
    font-weight: bold;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
}

.calendar-day-label {
    flex: 0 0 50px;
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
    font-size: 14px;
}

.calendar-hour {
    flex: 0 0 40px;
    height: 25px;
    margin: 1px;
    border-radius: 3px;
    background-color: #ddd;
}

.calendar-hour.online { background-color: #1abc9c; }
.calendar-hour.offline { background-color: #eee; }
.calendar-hour.current-hour { border: 2px solid #e67e22; }

.calendar-legend {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 13px;
}

.legend-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 3px;
}

.legend-box.online { background-color: #1abc9c; }
.legend-box.offline { background-color: #eee; border: 1px solid #ccc; }
.legend-box.current-hour { border: 2px solid #e67e22; background-color: #fff; }

.calendar-notes {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .calendar-hour { flex: 0 0 25px; height: 20px; }
    .calendar-day-label { flex: 0 0 35px; font-size: 12px; }
    .calendar-legend { flex-wrap: wrap; gap: 10px; }
}
.card.sidebar-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}