/**
 * Team Member Status Manager - Frontend Styles
 * Version: 1.0.0
 */

/* Additional responsive styles for mobile devices */
@media (max-width: 480px) {
    .tmsm-status-container {
        padding: 15px;
    }
    
    .tmsm-status-btn {
        display: block;
        width: 100%;
        margin: 5px 0;
    }
    
    .tmsm-modal-content {
        margin: 20% auto;
        width: 95%;
        padding: 15px;
    }
}

/* Print styles - hide status management when printing */
@media print {
    .tmsm-status-container {
        display: none !important;
    }
}

/* Animation for status badge changes */
.tmsm-status-badge {
    transition: all 0.3s ease;
}

/* Loading state */
.tmsm-loading {
    opacity: 0.6;
    pointer-events: none;
}

.tmsm-loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tmsm-spin 0.6s linear infinite;
}

@keyframes tmsm-spin {
    to { transform: rotate(360deg); }
}

/* Fade in animation for status container */
@keyframes tmsm-fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tmsm-status-container {
    animation: tmsm-fadeIn 0.3s ease;
}

/* Accessibility improvements */
.tmsm-status-btn:focus,
.tmsm-modal-close:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tmsm-status-badge.active {
        border: 2px solid #155724;
    }
    
    .tmsm-status-badge.paused {
        border: 2px solid #856404;
    }
    
    .tmsm-status-badge.deactivated {
        border: 2px solid #721c24;
    }
}

/* Dark mode support (if theme supports) */
@media (prefers-color-scheme: dark) {
    .tmsm-status-container {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }
    
    .tmsm-current-status {
        background: #2a2a2a;
        border-color: #3a3a3a;
    }
    
    .tmsm-modal-content {
        background: #1e1e1e;
        color: #e0e0e0;
    }
    
    .tmsm-form-group select,
    .tmsm-form-group input[type="date"] {
        background: #2a2a2a;
        color: #e0e0e0;
        border-color: #3a3a3a;
    }
}