/**
 * Entry List – Frontend Styles
 *
 * Supplements entries-bios.css (from old plugin) with fixes for
 * thumbnails, row alignment, search clear, and AJAX loading state.
 *
 * @package BadmintonEntriesManager
 * @since 1.1.0
 */

/* ── Rider Thumbnail ────────────────────────────────────────────── */

/*
 * Base thumbnail: 60×60 square, no border-radius below 992px.
 * Circle only at desktop (992px+).
 */
.bem-rider-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    overflow: hidden;
    background: #e8ecef;
    vertical-align: middle;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 0;
}

/*
 * Old plugin targets td:first-of-type span as a number badge
 * (mobile: 25px blue circle; 768px+: position:absolute overlay).
 * We must fully reset those styles on our span.bem-rider-thumb.
 * Using span.bem-rider-thumb raises specificity above the old rule.
 */
body.entries-entries .bht-results-container table tr td:first-of-type span.bem-rider-thumb,
body.entries-entries .bht-results-container table tr td span.bem-rider-thumb {
    position: static !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    background: #e8ecef !important;
    color: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
    text-shadow: none !important;
    text-align: center !important;
    border-radius: 0 !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    display: inline-flex !important;
}



/* Reset img margin added by old plugin at 768px+ inside td:first-of-type */
body.entries-entries .bht-results-container table tr td .bem-rider-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    object-fit: cover;
    display: block !important;
    border-radius: 0;
}

/* Remove td.photo_number cell padding so the thumbnail fills cleanly */
body.entries-entries .bht-results-container table tr td.photo_number {
    padding: 0 !important;
}

/* ── Row Alignment & Borders ────────────────────────────────────── */

body.entries-entries .bht-results-container table tr td,
body.entries-entries .bht-results-container table tr th {
    vertical-align: middle;
}

/*
 * dbl-single has border-top:1px + border-bottom:1px in entries-bios.css.
 * Between two consecutive dbl-single rows that produces a visible double
 * line. Remove the top border — the bottom border of the preceding row
 * is enough. The dbl-subsequent~.dbl-first sibling rule (higher specificity)
 * still adds a top border to restart groups after an Or block.
 */
/* body.entries-entries .bht-results-container table tr.dbl-single {
    border-top: 0;
} */

/* Consistent minimum row height for all content rows */
body.entries-entries .bht-results-container table tr.dbl-single,
body.entries-entries .bht-results-container table tr.dbl-first,
body.entries-entries .bht-results-container table tr.dbl-subsequent,
body.entries-entries .bht-results-container table tr.wl-single {
    min-height: 80px;
}

/* Waitlist rows: same border style as entry list rows */
body.entries-entries .bht-results-container table tr.wl-single {
    /* border-top: 0; */
    border-bottom: 1px solid #bcc3c7;
}

@media (min-width: 992px) {

    body.entries-entries .bht-results-container table tr.dbl-single>td.photo_number,
    body.entries-entries .bht-results-container table tr.dbl-first>td.photo_number,
    body.entries-entries .bht-results-container table tr.dbl-subsequent>td.photo_number,
    body.entries-entries .bht-results-container table tr.wl-single>td.photo_number {
        gap: 6px;
    }
}

/* ── Waitlist position badge ────────────────────────────────────── */

/*
 * The old plugin CSS treats every td:first-of-type span as a photo badge
 * (position:absolute overlay at 768px+). The .position span must stay
 * in-flow as a plain styled label — not overlap the thumbnail box.
 */
body.entries-entries .bht-results-container table tr td span.position {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    background: #4A5790 !important;
    color: white !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

/* ── "Or" Row Fix ───────────────────────────────────────────────── */

body.entries-entries .bht-results-container table tr.dbl-or {
    min-height: 0;
    display: table-row;
}

@media (min-width: 992px) {
    body.entries-entries .bht-results-container table tr.dbl-or {
        display: flex;
    }

    body.entries-entries .bht-results-container table tr.dbl-or>td {
        display: block;
        flex: 1 1 100%;
    }
}

/* ── Search Wrap + Clear Button ─────────────────────────────────── */

.bem-search-wrap {
    position: relative;
    display: inline-block;
    width: calc(100% - 50px);
}

.bem-search-wrap input[type="text"] {
    width: 100% !important;
    padding-right: 30px !important;
    box-sizing: border-box;
}

.bem-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #888;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    z-index: 2;
}

.bem-search-clear:hover {
    color: #333;
}

/* ── AJAX Loading State ─────────────────────────────────────────── */

.bem-loading {
    position: relative;
    min-height: 120px;
}

.bem-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.bem-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #bcc3c7;
    border-top-color: #4A5790;
    border-radius: 50%;
    z-index: 11;
    animation: bem-spin 0.6s linear infinite;
}

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

/* ── Withdrawn ─────────────────────────────────────────────────── */

body.entries-entries .bht-results-container table tr.withdrawn {
    opacity: 0.6;
}

body.entries-entries .bht-results-container table tr.withdrawn i.highlight {
    color: #c0392b;
    font-style: normal;
    font-weight: 600;
    margin-left: 6px;
    font-size: 0.85em;
}

/* ── No Results ─────────────────────────────────────────────────── */

.bem-no-results {
    padding: 30px 10px;
    text-align: center;
    color: #666;
    font-size: 15px;
}