.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.day-cell {
    aspect-ratio: auto !important;
    height: auto;
    min-height: 60px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 640px) {
    .day-cell {
        font-size: 11px;
        min-height: 50px;
    }
}

/* Calendar container responsive padding */
#calendar {
    padding: 0.5rem;
}

@media (min-width: 640px) {
    #calendar {
        padding: 1rem;
    }
}

.day-cell:hover {
    filter: brightness(0.95);
}

.day-cell.friday {
    background-opacity: 0.7;
    border-color: #BFDBFE; /* blue-200 */
}

.streak-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

#tabCounter {
    z-index: 1000;
    transition: all 0.3s ease;
}

#tabCounter.warning {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Violation checkbox styling */
.violation-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.violation-item:hover {
    background-color: rgb(243 244 246);
}

.violation-item.checked {
    background-color: rgb(254 242 242);
}

.violation-item .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    color: rgb(34 197 94);
}

.violation-item.checked .icon {
    color: rgb(239 68 68);
}

.violation-item span {
    transition: color 0.2s;
}

.violation-item.checked span {
    color: rgb(239 68 68);
}

/* Better toggle switch styling */
.dot {
    transition: transform 0.2s ease-in-out;
}

input:checked ~ .dot {
    transform: translateX(100%);
    background-color: white; /* Keep dot visible */
}

input:checked ~ div.bg-gray-200 {
    background-color: #3b82f6; /* Switch track color */
}
#scheduleTimeline .flex {
    transition: all 0.2s ease;
    position: relative;
}

#scheduleTimeline .flex:hover {
    transform: translateX(4px);
}

#scheduleTimeline .critical {
    position: relative;
}

#scheduleTimeline .critical::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background-color: #dc2626;
    border-radius: 2px;
}

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

#scheduleTimeline .critical:not(.past) > div {
    animation: pulseRed 2s infinite;
}

#scheduleTimeline .time-marker {
    font-family: monospace;
    letter-spacing: 0.05em;
}

body.void-state-1 { transition: background-color 0.5s ease; }
body.void-state-2 { transition: background-color 0.5s ease; }
body.void-state-3 { transition: background-color 0.5s ease; }

.emergency-action {
    position: relative;
    z-index: 1000;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.void-disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}