/* ADT MFU Check-In System - Custom Styles */

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Camera video styling */
video {
    transform: scaleX(-1); /* Mirror the video for natural interaction */
}

/* User card styling - dark theme compatible */
/* Note: User cards in dashboard/admin now use inline Tailwind classes for dark theme */
/* These styles are kept for backwards compatibility but may be overridden */

/* Status badges - dark theme */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.in {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-badge.out {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Success/Error animations */
@keyframes success-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

.animate-success {
    animation: success-pulse 0.5s ease-in-out;
}

.animate-error {
    animation: shake 0.3s ease-in-out;
}

/* Scrollbar styling - dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Dashboard specific - dark theme compatible */
/* Note: Dashboard cards now use inline Tailwind classes for dark theme */

/* Admin table styling - dark theme */
.admin-table {
    width: 100%;
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
}

.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* Empty state - dark theme */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.3);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: 0.5;
}

/* Loading spinner - dark theme */
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #4a90c2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Photo indicators for multi-photo management */
.photo-indicator {
    position: relative;
}

.photo-indicator .remove-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}

.photo-indicator .remove-photo-btn:hover {
    background-color: rgba(239, 68, 68, 0.3);
}