/* ── RPBA Breeder Table ────────────────────────────────────────── */
:root {
    --rpba-blue:       #38B3FC;
    --rpba-blue-dark:  #2EB1FF;
    --rpba-blue-light: #e6f5ff;
    --rpba-text:       #5D7393;
    --rpba-text-dark:  #485873;
    --rpba-muted:      #9ca3af;
    --rpba-border:     #E0E2E9;
    --rpba-bg:         #f5f7fa;
    --rpba-white:      #ffffff;
    --rpba-radius:     8px;
}

/* Wrapper */
.rpba-bt-wrap {
    font-family: Inter, 'Open Sans', Roboto, sans-serif;
    color: var(--rpba-text);
    font-size: 16px;
}

/* ── Filter bar ─────────────────────────────────────────────────── */
.rpba-bt-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    align-items: center;
}

.rpba-bt-search-wrap {
    position: relative;
    flex: 1 1 160px;
    min-width: 130px;
}

.rpba-bt-search-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rpba-muted);
    pointer-events: none;
}

.rpba-bt-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1.5px solid var(--rpba-border);
    border-radius: var(--rpba-radius);
    font-size: 14px;
    color: var(--rpba-text-dark);
    background: var(--rpba-white);
    outline: none;
    box-shadow: none;
    transition: border-color .18s;
    box-sizing: border-box;
}

.rpba-bt-input:focus {
    border-color: var(--rpba-blue);
}

.rpba-bt-input::placeholder {
    color: var(--rpba-muted);
}

.rpba-bt-select {
    padding: 8px 28px 8px 10px;
    border: 1.5px solid var(--rpba-border);
    border-radius: var(--rpba-radius);
    font-size: 14px;
    color: var(--rpba-text-dark);
    background: var(--rpba-white);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .18s;
}

.rpba-bt-select:focus {
    border-color: var(--rpba-blue);
}

/* Toggle chips */
.rpba-bt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--rpba-border);
    border-radius: 50px;
    font-size: 14px;
    color: var(--rpba-text);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
    white-space: nowrap;
    background: var(--rpba-white);
}

.rpba-bt-chip input[type="checkbox"] {
    display: none;
}

.rpba-bt-chip:has(input:checked),
.rpba-bt-chip.is-active {
    background: var(--rpba-blue);
    border-color: var(--rpba-blue);
    color: #fff;
}

.rpba-bt-chip:hover {
    border-color: var(--rpba-blue);
    color: var(--rpba-blue);
}

.rpba-bt-chip:has(input:checked):hover,
.rpba-bt-chip.is-active:hover {
    color: #fff;
    opacity: .85;
}

/* ── Table wrap ─────────────────────────────────────────────────── */
.rpba-bt-table-wrap {
    position: relative;
    overflow-x: auto;
}

/* ── Table ──────────────────────────────────────────────────────── */
.rpba-bt-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rpba-white);
    font-size: 16px;
    border: none;
}

/* ── thead ──────────────────────────────────────────────────────── */
.rpba-bt-table thead th {
    color: #485873;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 30px;
    border: none;
    border-bottom: 1px dashed #E0E2E9;
    white-space: nowrap;
}

.rpba-bt-table thead th[data-sort] {
    cursor: pointer;
}

.rpba-bt-table thead th[data-sort]:hover {
    color: var(--rpba-blue);
}

.rpba-bt-table thead th.is-sorted-asc::after  { content: ' ▲'; font-size: 9px; padding-left: 5px; }
.rpba-bt-table thead th.is-sorted-desc::after { content: ' ▼'; font-size: 9px; padding-left: 5px; }

/* Column widths — mirrors ninja_column_* widths from reference */
.rpba-bt-table th.col-member-number,
.rpba-bt-table td.col-member-number { width: 15%; text-align: left; }

.rpba-bt-table th.col-tier,
.rpba-bt-table td.col-tier          { width: 14%; text-align: center; }

.rpba-bt-table th.col-first-name,
.rpba-bt-table td.col-first-name    { width: 15%; text-align: left; }

.rpba-bt-table th.col-breed         { width: 10%; text-align: left; font-weight: 500; }
.rpba-bt-table td.col-breed         { width: 10%; text-align: left; font-weight: 400; }

.rpba-bt-table th.col-state,
.rpba-bt-table td.col-state         { width: 8%; text-align: left; }

.rpba-bt-table th.col-litter,
.rpba-bt-table td.col-litter        { width: 5%; text-align: center; }

.rpba-bt-table th.col-status,
.rpba-bt-table td.col-status        { width: 18%; text-align: center; }

.rpba-bt-table th.col-website,
.rpba-bt-table td.col-website       { width: 15%; text-align: center; }

/* ── tbody ──────────────────────────────────────────────────────── */
.rpba-bt-table tbody tr {
    transition: background .1s;
}

.rpba-bt-table tbody td {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #5D7393;
    padding: 20px 12px;
    border: none;
    border-bottom: 1px dashed #E0E2E9;
    vertical-align: middle;
}

/* ── Litter cell — breed + icon side by side ────────────────────── */
.rpba-bt-table td.col-litter > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rpba-bt-table td.col-litter > div > span {
    flex: 1;
}

.rpba-bt-litter-icon {
    cursor: pointer;
    display: inline-block;
    padding-left: 6px;
    vertical-align: middle;
    animation: rpba-pulse 2s infinite;
}

@keyframes rpba-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ── Status badges ──────────────────────────────────────────────── */
.rpba-bt-status-badge {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    display: block;
}

.rpba-bt-status-badge.full {
    background: #DFF2FC;
    color: #38B3FC;
}

.rpba-bt-status-badge.probationary {
    background: #EBF7F1;
    color: #65BE92;
}

/* ── Tier badge ─────────────────────────────────────────────────── */
.rpba-bt-tier-badge {
    background: #f8f8f8;
    padding: 6px 9px;
    border-radius: 4px;
    width: 40px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    display: none; /* shown by JS once tier is determined */
}

.rpba-bt-tier-badge img {
    width: 30px !important;
    display: block;
    margin: 0 auto;
}

/* Tooltip popup */
.rpba-bt-tier-badge .rpba-bt-tier-tooltip {
    background: #FFFFFF;
    box-shadow: 0px 1px 16px rgba(93, 115, 147, 0.1);
    border-radius: 8px;
    color: #5D7393;
    position: absolute;
    margin: 0;
    left: -175px;
    top: -18px;
    padding: 10px;
    width: 155px;
    height: 72px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    z-index: 10;
}

.rpba-bt-tier-badge .rpba-bt-tier-tooltip .tier-label {
    margin-bottom: 5px;
    cursor: default;
}

.rpba-bt-tier-badge .rpba-bt-tier-tooltip .tier-desc {
    cursor: default;
}

.rpba-bt-tier-badge .rpba-bt-tier-tooltip .right-arrow {
    position: absolute;
    top: 27px;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
}

/* ── Website link ───────────────────────────────────────────────── */
.rpba-bt-link {
    color: #38B3FA;
    text-decoration: none;
    font-weight: 400;
}

.rpba-bt-link:hover {
    text-decoration: underline;
    color: #38B3FA;
}

.rpba-bt-muted {
    color: var(--rpba-muted);
}

/* ── No results ─────────────────────────────────────────────────── */
.rpba-bt-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--rpba-muted);
    font-size: 16px;
}

/* ── Loading overlay ────────────────────────────────────────────── */
.rpba-bt-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    align-items: center;
    justify-content: center;
}

.rpba-bt-loading.is-visible {
    display: flex;
}

.rpba-bt-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--rpba-border);
    border-top-color: var(--rpba-blue);
    border-radius: 50%;
    animation: rpba-spin .7s linear infinite;
}

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

/* ── Pagination + footer row ────────────────────────────────────── */
.rpba-bt-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.rpba-bt-pagination {
    flex: 1 1 auto;
}

.rpba-bt-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.rpba-bt-page-btn {
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    color: #5D7393 !important;
    border: none;
    border-radius: 4px;
    margin: 0 3px;
    padding: 5px 12px;
    background: #fff !important;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

.rpba-bt-page-btn:hover {
    background: #fff !important;
    color: #38B3FC !important;
}

.rpba-bt-page-btn--active {
    background: #fff !important;
    color: #38B3FC !important;
    font-weight: 700 !important;
}

.rpba-bt-ellipsis {
    padding: 5px 4px;
    color: var(--rpba-muted);
    font-size: 16px;
}

/* ── Footer / count ─────────────────────────────────────────────── */
.rpba-bt-footer {
    flex-shrink: 0;
    font-size: 16px;
    color: #5D7393;
    font-weight: 300;
    white-space: nowrap;
}

.rpba-bt-footer strong {
    font-weight: 300;
}

/* ── Tippy custom theme ─────────────────────────────────────────── */
.tippy-box[data-theme~='custom-tippy-theme'] {
    background: #fff;
    color: #5D7393;
    box-shadow: 0px 4px 20px rgba(93, 115, 147, 0.15);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    max-width: 260px !important;
}

.tippy-box[data-theme~='custom-tippy-theme'] h4 {
    color: #485873;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
}

.tippy-box[data-theme~='custom-tippy-theme'] p {
    margin: 0;
    font-size: 13px;
}

.tippy-box[data-theme~='custom-tippy-theme'] p span {
    display: block;
    margin-bottom: 8px;
}

.tippy-box[data-theme~='custom-tippy-theme'] p div {
    display: flex;
    gap: 8px;
}

.tippy-box[data-theme~='custom-tippy-theme'] p div a {
    font-size: 12px;
    font-weight: 600;
    color: #38B3FC;
    text-decoration: none;
    white-space: nowrap;
}

.tippy-box[data-theme~='custom-tippy-theme'] p div a:hover {
    text-decoration: underline;
}

.tippy-box[data-theme~='custom-tippy-theme'] .tippy-arrow {
    color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 795px) {
    .rpba-bt-table thead th,
    .rpba-bt-table tbody td {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .rpba-bt-table thead th {
        padding-bottom: 15px !important;
    }

    .rpba-bt-table tbody td {
        padding: 15px 10px !important;
    }
}

@media (max-width: 700px) {
    .rpba-bt-table thead th,
    .rpba-bt-table tbody td {
        text-align: left !important;
        font-size: 14px !important;
        line-height: 18px !important;
        padding: 10px !important;
    }

    .rpba-bt-table thead th {
        font-size: 12px !important;
        color: #5D7393 !important;
        padding-top: 15px;
    }

    .rpba-bt-status-badge {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    .rpba-bt-tier-badge {
        margin: 0 auto !important;
        width: 30px !important;
        padding: 4px !important;
    }

    .rpba-bt-tier-badge .rpba-bt-tier-tooltip {
        top: -20px;
        left: 40px;
    }

    .rpba-bt-tier-badge .rpba-bt-tier-tooltip .right-arrow {
        display: none !important;
    }

    .rpba-bt-footer {
        margin-top: 14px !important;
        margin-bottom: 10px;
        font-size: 14px !important;
    }
}

@media (max-width: 600px) {
    .rpba-bt-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* On mobile hide numbered pages, keep prev/next only */
    .rpba-bt-page-btn.is-numbered {
        display: none;
    }

    .rpba-bt-page-btn.is-prev,
    .rpba-bt-page-btn.is-next {
        display: inline-block !important;
    }

    .rpba-bt-filter-bar {
        flex-direction: column;
    }

    .rpba-bt-search-wrap {
        flex: 1 1 100%;
    }

    /* On mobile: hide litter column — icon moves into breed cell via JS */
    .rpba-bt-table th.col-litter,
    .rpba-bt-table td.col-litter {
        display: none !important;
    }

    /* Breed cell on mobile: flex row so icon sits right of text */
    .rpba-bt-table td.col-breed {
        white-space: nowrap;
    }

    .rpba-bt-table td.col-breed .rpba-bt-breed-inner {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 4px;
        white-space: normal;
    }

    .rpba-bt-table td.col-breed .rpba-bt-breed-inner .rpba-bt-litter-icon-mobile {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0;
        margin-left: auto;
        padding-left: 0;
    }
}

/* ── v1.1.0 fixes ───────────────────────────────────────────────── */

/* Prevent theme link colour bleeding into plain-text cells */
.rpba-bt-table td.col-first-name,
.rpba-bt-table td.col-breed,
.rpba-bt-table td.col-member-number {
    color: #5D7393 !important;
}

/* Status badge — ensure it always displays as block even before JS runs */
.rpba-bt-table td.col-status > span {
    display: block;
}

/* Litter cell — hide the empty span text cleanly */
.rpba-bt-table td.col-litter > div > span:empty {
    display: none;
}

/* ── v1.1.2 ─────────────────────────────────────────────────────── */

/* Hide litter column header text */
.rpba-bt-table th.col-litter {
    visibility: hidden;
}

/* First name — link styled blue like reference */
.rpba-bt-table td.col-first-name {
    color: #5D7393 !important; /* reset td */
}

.rpba-bt-member-name {
    display: block;
    color: #38B3FA !important;
    font-weight: 400 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.rpba-bt-member-name:hover {
    color: #38B3FA !important;
    text-decoration: underline !important;
}

/* Join Waitlist — small blue link below the name */
.join-waitlist-button {
    display: block;
    color: #38B3FA !important;
    font-size: 13px;
    font-weight: 400 !important;
    text-decoration: none;
    margin-top: 3px;
    transition: opacity 0.2s;
}

.join-waitlist-button:hover {
    opacity: 0.75;
    text-decoration: underline !important;
}

/* Litter cell — centre the sparkle icon */
.rpba-bt-table td.col-litter {
    text-align: center;
}

.rpba-bt-litter-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpba-bt-litter-icon {
    cursor: pointer;
    animation: rpba-pulse 2s ease-in-out infinite;
    display: block;
}

/* Website link — match reference "Visit Website" style */
.rpba-bt-table td.col-website {
    text-align: center;
}

/* ── v1.1.3 ─────────────────────────────────────────────────────── */

/* Tier header info icon */
.rpba-bt-tier-info-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -1px;
    text-decoration: none !important;
}

.rpba-bt-tier-info-link img {
    display: inline-block;
    vertical-align: middle;
}