/* ============================================================
   Shared styles for /meritlist, /meritlist/2025-26/ug,
   /meritlist/2026-27/ug
   ============================================================ */

.breadcrumb-nav { font-size: 0.85em; color: #666; margin: 0 0 16px; }
.breadcrumb-nav a { color: #0056b3; text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }

.merit-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}

/* ──────────────── SEARCH BAR (matches site-wide search style) ──────────────── */
.search-bar {
    margin: 18px 0;
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: stretch;
}

.search-box-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #c4b5fd;
    transform: translateZ(0);
    isolation: isolate;
    contain: layout style;
}

.search-box-wrapper::before {
    content: "";
    position: absolute;
    width: 220%;
    height: 220%;
    top: -60%;
    left: -60%;
    background: conic-gradient(#7c3aed, #3b82f6, #06b6d4, #6366f1, #7c3aed);
    animation: meritRotateBorder 3s linear infinite;
    opacity: 0.85;
}

.search-box-wrapper::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    border-radius: 8px;
    z-index: 1;
}

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

.search-box-wrapper:focus-within::before {
    animation-duration: 3.2s;
    opacity: 1;
}

.search-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 13px 16px;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}

.search-bar .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ──────────────── TABLE ──────────────── */
.merit-table-wrapper {
    overflow: auto;
    max-height: 70vh;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 48, 135, 0.08);
    /* isolate so page-level auto ads don't get slotted mid-table */
    contain: layout;
}
#meritTable {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
#meritTable th {
    background: #0d47a1;
    color: white;
    padding: 13px 10px;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}
#meritTable td {
    padding: 11px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
#meritTable tbody tr:nth-child(even) { background: #f8fafd; }
#meritTable tbody tr:hover { background-color: #eef5ff; }

/* ──────────────── PAGINATION ──────────────── */
#pagination {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.pg-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
}
.pg-row-secondary {
    gap: 18px;
    color: #555;
    font-size: 0.92em;
}
.pg-info { white-space: nowrap; }

.btn {
    padding: 10px 22px;
    background: linear-gradient(135deg, #0b6ef6, #1565c0);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-clear { background: linear-gradient(135deg, #888, #555); }

.cat-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.cat-legend span {
    background: #eef5ff; color: #0d47a1; border: 1px solid #cfe1fb;
    padding: 5px 12px; border-radius: 20px; font-size: 0.82em; font-weight: 600;
}

.mobile-scroll-note { display: none; }

@media (max-width: 700px) {
    .mobile-scroll-note { display: block; }

    #meritTable th, #meritTable td { font-size: 12.5px; padding: 9px 7px; }

    .search-input { padding: 11px 12px; font-size: 15px; }

    .pg-row { gap: 8px; }
    .pg-row .btn { padding: 8px 14px; font-size: 12.5px; }
    .pg-info { font-size: 12.5px; }
    .pg-row-secondary { font-size: 12px; gap: 12px; }
    .pg-row-secondary .btn { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 360px) {
    .pg-row .btn { padding: 7px 10px; font-size: 11.5px; }
    .pg-info { font-size: 11.5px; }
}

/* ---- Performance fix: default page-1 visibility handled by pure CSS ----
   Data stays fully hardcoded in the HTML (needed for SEO / AI Overview
   crawling), but the browser no longer has to wait for a 6000+ row JS
   loop before it can paint. JS only takes over once the user clicks
   pagination or searches. Mobile shows 50 rows/page, desktop shows 100
   (matches the rowsPerPage logic in the inline script). */
#meritTable tbody tr {
    display: none;
    content-visibility: auto;
    contain-intrinsic-size: auto 42px;
}
#meritTable tbody tr:nth-child(-n+50) {
    display: table-row;
}
@media (min-width: 701px) {
    #meritTable tbody tr:nth-child(-n+100) {
        display: table-row;
    }
}