/* ================================================
   EXAMS PAGE STYLES
   ================================================ */

/* Portfolio group card */
.exam-portfolio-group {
    margin-bottom: 36px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
}

.exam-portfolio-title {
    color: #020617;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #E2E8F0;
}

/* ------------------------------------------------
   Skeleton shimmer
   ------------------------------------------------ */
.skeleton-group .skeleton-line {
    display: inline-block;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
    vertical-align: middle;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-group .exam-portfolio-title {
    border-bottom: 2px solid #E2E8F0;
}

.skeleton-group .exam-table thead tr {
    background-color: #F1F5F9;
}

.skeleton-group .exam-table td,
.skeleton-group .exam-table th {
    padding: 12px 14px;
}

/* ------------------------------------------------
   Table
   ------------------------------------------------ */
.exam-table-wrapper {
    overflow-x: auto;
}

.exam-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    border: 2px solid #fff !important;
}

.exam-table tr td:first-child,
.exam-table tr th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.exam-table tr td:last-child,
.exam-table tr th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.exam-table thead tr {
    background-color: #fff;
}

.exam-table th {
    text-align: left;
    padding: 10px 14px;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: none !important;
}

.exam-table td {
    padding: 12px 14px;
    color: #1E293B;
    border: none !important;
    vertical-align: middle;
}

.exam-table td[data-label="Date"] {
    min-width: 105px !important;
}

.exam-table td[data-label="Seat"] {
    min-width: 99px !important;
}

.exam-table tbody tr:last-child td {
    border-bottom: none;
}

.exam-table tbody tr:hover {
    background-color: #F8FAFC;
}

/* ------------------------------------------------
   Register button
   ------------------------------------------------ */
.exam-register-btn {
    display: inline-block;
    padding: 6px 18px;
    background-color: #000;
    color: #fff !important;
    border-radius: 46px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.3s, transform 0.2s;
    white-space: nowrap;
}

.exam-register-btn:hover {
    background-color: #a11e29;
    transform: translateY(-1px);
}

/* Seat near-full highlight */
.exam-table td span.seat-green {
    color: #16A34A;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #8BD7A0;
    background: #E8F8EB;
    color: #007124;
    padding: 4px 8px;
}

.exam-table td span.seat-orange {
    color: #16A34A;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #FFB876;
    background: #FFF0E2;
    color: #BF6300;
    padding: 4px 8px;
}

.exam-table td span.seat-red {
    color: #16A34A;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #F7727D;
    background: #FFEEE9;
    color: #B5251F;
    padding: 4px 8px;
}

/* ------------------------------------------------
   Load More
   ------------------------------------------------ */
#pecb-exams-load-more {
    border: 1px solid #000;
    border-radius: 46px;
    background-color: #F1F5F9;
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 12px 36px;
    font-size: 14px;
}

#pecb-exams-load-more:hover {
    background-color: #000;
    color: #fff;
}

/* ------------------------------------------------
   No results
   ------------------------------------------------ */
.exams-api-container .no-exams {
    padding: 40px 20px;
    text-align: center;
    color: #64748B;
    background: #fff;
    border-radius: 16px;
    font-size: 16px;
}

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */
@media (max-width: 768px) {

    .exam-table,
    .exam-table thead,
    .exam-table tbody,
    .exam-table th,
    .exam-table td,
    .exam-table tr {
        display: block;
        margin: 0px;
    }

    .exam-table thead tr {
        display: none;
    }

    .exam-table tbody tr {
        margin-bottom: 16px;
        border: none !important;
        border-radius: 12px;
    }

    .exam-table td {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        border-bottom: none;
        font-size: 13px;
    }

    .exam-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748B;
        font-size: 11px;
        text-transform: uppercase;
        min-width: 100px;
        flex-shrink: 0;
        padding: 0 8px;
    }

    .exam-table tr th:first-child,
    .exam-table tr td:first-child {
        border-radius: 0px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .exam-table tr th:last-child,
    .exam-table tr td:last-child {
        border-radius: 0px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}