/* Custom styles for Presence App */

/* Smooth scrolling for calendar */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}

/* Calendar cell interactions */
.calendar-cell {
    transition: all 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.calendar-cell:active {
    transform: scale(0.95);
}

/* Selection highlight animation */
@keyframes selectPulse {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.9); }
}

.calendar-cell-selected {
    animation: selectPulse 1s ease-in-out infinite;
}

/* Mobile touch friendly sizes */
@media (max-width: 640px) {
    .calendar-cell {
        min-width: 32px;
        min-height: 36px;
    }
    
    table th, table td {
        padding: 2px;
    }
}

/* Sticky column shadow on scroll */
.sticky {
    z-index: 10;
}

table:has(.sticky) {
    position: relative;
}

/* Print styles */
@media print {
    nav { display: none; }
    .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none; }
    button { display: none; }
}

/* Smooth transitions for Alpine.js */
[x-cloak] { display: none !important; }