/* Mobile Responsive Styles for Certificates Page */

@media (max-width: 767.98px) {
    /* Make table cells wrap text on mobile */
    .table.text-nowrap td,
    .table.text-nowrap th {
        white-space: normal;
        word-wrap: break-word;
        font-size: 0.875rem;
        padding: 0.5rem 0.25rem;
    }
    
    /* Improve button group spacing on mobile */
    .btn-group-vertical .btn {
        margin-bottom: 0.25rem;
        width: 100%;
        text-align: left;
    }
    
    /* Ensure table is scrollable on mobile */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    /* Better spacing for pagetitle on mobile */
    .pagetitle h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Hide less important columns on mobile */
    .table thead th:nth-child(4),
    .table tbody td:nth-child(4),
    .table thead th:nth-child(7),
    .table tbody td:nth-child(7),
    .table thead th:nth-child(8),
    .table tbody td:nth-child(8),
    .table thead th:nth-child(9),
    .table tbody td:nth-child(9),
    .table thead th:nth-child(11),
    .table tbody td:nth-child(11) {
        display: none;
    }
    
    /* Show user ID in user name cell on mobile */
    .table tbody td:nth-child(5)::before {
        content: "User ID: " attr(data-user-id);
        display: block;
        font-weight: bold;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet adjustments */
    .table td,
    .table th {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
}

.select2-container .select2-selection--single {
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 36px;
}