/**
 * TestInvite Integration Styles
 * 
 * This stylesheet includes responsive design for all screen sizes
 */

/* Global styles */
:root {
    --primary-color: #0073aa;
    --primary-hover: #005177;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-gray: #f2f2f2;
    --border-color: #ddd;
    --disabled-color: #cccccc;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-success {
    background-color: var(--success-color);
    color: #fff;
}

.badge-pending {
    background-color: var(--warning-color);
    color: #000;
}

.badge-failed {
    background-color: var(--danger-color);
    color: #fff;
}

/* Admin styles */
.user-course-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.user-course-table th, .user-course-table td {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
}

.user-course-table th {
    background-color: var(--light-gray);
    text-align: left;
}

.search-form {
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.search-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem;
}

.spinner {
    display: none;
    margin-left: 0.625rem;
    vertical-align: middle;
}

.course-item {
    margin-bottom: 0.625rem;
}

/* Status styles */
.status-complete { color: var(--success-color); font-weight: bold; }
.status-success { color: var(--success-color); font-weight: bold; }
.status-failed { color: var(--danger-color); font-weight: bold; }
.status-pending { color: var(--warning-color); font-weight: bold; }
.status-unknown { color: gray; font-weight: bold; }

/* Exam button styles */
.exam-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.exam-btn:hover {
    background-color: var(--primary-hover);
}

.exam-btn:disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    /* Make tables responsive */
    .user-course-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    /* Adjust form for smaller screens */
    .search-form {
        flex-direction: column;
    }
    
    .search-form input[type="text"] {
        width: 100%;
    }
    
    /* Make buttons more touch-friendly */
    .exam-btn {
        padding: 0.75rem 1rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Responsive table for exam history */
@media screen and (max-width: 600px) {
    .user-course-table thead {
        display: none;
    }
    
    .user-course-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
    }
    
    .user-course-table td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid var(--border-color);
        position: relative;
        padding-left: 50%;
    }
    
    .user-course-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        width: 45%;
        padding-right: 0.5rem;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    
    .user-course-table td:last-child {
        border-bottom: 0;
    }
}