/* ================================
   My Dancers table
   ================================ */

/* width:fit-content, not width:auto — auto on a block-level table means
   "fill the available width" (the same as 100% in practice), it does NOT
   shrink-wrap to content on its own. !important is still needed regardless,
   since WooCommerce's own .woocommerce table.shop_table rule (from
   woocommerce.css, not this file) sets width:100% with higher specificity
   than a plain .ngd-dancers-table selector. */
.ngd-dancers-table {
    border-collapse: separate;
    border-spacing: 0 8px;
    width: fit-content !important;
    /* WooCommerce's own .woocommerce table.shop_table rule puts a 1px border
       + 5px border-radius around the whole <table> element itself, on top of
       (and separate from) the rounded card background we give each row below.
       That outer border/radius was the stray line showing below a gap under
       the last row on mobile — the rows never touched it. */
    border: none !important;
    border-radius: 0 !important;
}

.ngd-dancers-table thead th {
    color: #888888;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 0 16px 8px;
    border: none !important;
    white-space: nowrap;
}

.ngd-dancers-table thead th:last-child {
    text-align: center;
}

.ngd-dancer-row {
    background: #242424;
}

.ngd-dancer-row td {
    border: none !important;
    padding: 14px 16px !important;
}

.ngd-dancer-row td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.ngd-dancer-row td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.ngd-dancer-name {
    color: #ffffff;
    font-weight: 700;
}

.ngd-dancer-actions {
    display: flex;
    gap: 8px;
    /* nowrap, not wrap — a longer dancer name squeezing this column used to
       wrap Edit/Delete onto separate lines. The table-wrap scroll container
       below handles genuine overflow instead, so the buttons always stay on
       one line regardless of how long the name next to them is. */
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
}

/* Lets the table scroll horizontally instead of squeezing columns (and
   wrapping the action buttons) when a dancer's name is long enough that the
   table's natural content width — which table-layout:auto can't shrink
   below — exceeds the available space. Works at any viewport width, so it
   doesn't matter whether that happens on a narrow desktop window or a
   tablet; there's no name-length-dependent breakpoint to get wrong. */
.ngd-dancers-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.ngd-dancer-action {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.ngd-dancer-edit {
    background: rgba(123, 47, 190, 0.15);
    color: #b585e0 !important;
    border: 1px solid rgba(123, 47, 190, 0.4);
}

.ngd-dancer-edit:hover {
    background: #7B2FBE;
    color: #ffffff !important;
}

.ngd-dancer-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.ngd-dancer-delete:hover {
    background: #ef4444;
    color: #ffffff !important;
}

/* The edit form used to live inside the table as a colspan="3" row, which
   made its content part of the table's own fit-content width calculation —
   opening any dancer's edit form made the whole table (and every closed
   row's card background) balloon in width to fit the form, even though the
   visible form itself was narrower. It's a plain sibling <div> now instead,
   so it has no influence on the table's sizing at all. Needs its own
   top margin since it's no longer covered by the table's border-spacing. */
.ngd-dancer-edit-row {
    margin-top: 8px;
}

.ngd-dancer-edit-form {
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 0 20px 20px;
    /* Now that this is a plain block div (not inside a table cell), it
       defaults to filling its full container width — but the form fields
       inside are capped at 500px (shared .woocommerce-MyAccount-content
       form input max-width), so without this the bordered panel stretched
       well past its own content, leaving dead space on the right. */
    max-width: 540px;
    box-sizing: border-box;
}

/* The shared form-row styling gives every row a 16px margin-top, which
   collapses against the panel's own padding-top elsewhere but not here
   (this parent has padding on other sides), leaving the first row sitting
   too far below the panel's top border. :first-of-type (not :first-child) —
   the form's actual first child is a hidden nonce input, so :first-child
   would target that instead of the visible first form-row. Scoped to just
   this panel so other forms sharing the same form-row style are untouched. */
.ngd-dancer-edit-form form > p:first-of-type {
    margin-top: 4px;
}

@media (max-width: 768px) {
    /* Cell-level layout on mobile (stacking to block, the data-title label
       via ::before, etc.) is already handled by the shared Orders table
       mobile rules, which this table inherits since it shares that class —
       no need to duplicate that here, just the card-level spacing. */
    .ngd-dancers-table,
    .ngd-dancers-table thead,
    .ngd-dancers-table tbody,
    .ngd-dancer-row {
        display: block;
        width: 100% !important;
    }

    .ngd-dancers-table thead {
        display: none;
    }

    .ngd-dancer-row {
        margin-bottom: 12px;
        padding: 4px 0;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Belt and braces alongside the row's own overflow:hidden above — some
       mobile browsers don't reliably apply border-radius/overflow to table
       elements even once display is overridden to block, so the first/last
       cell get matching rounding directly too. */
    .ngd-dancer-row td:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .ngd-dancer-row td:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .ngd-dancer-name {
        font-size: 1.0625rem;
        padding-top: 14px !important;
    }

    .ngd-dancer-actions {
        padding-bottom: 14px !important;
    }

    /* Every cell's content sits flush against the card's right edge — the
       name/DOB values via the shared Orders-table space-between layout, the
       buttons via flex-end below — with only the shared 16px cell padding.
       A little extra room on all cells, not just Actions, so the values
       line up with the buttons instead of only the buttons getting pulled
       in. Needs 3 classes + tag to beat the shared Orders-table mobile
       padding rule (2 classes + tag) rather than depend on load order. */
    .woocommerce-MyAccount-content .ngd-dancers-table .ngd-dancer-row td {
        padding-right: 10px !important;
    }

    /* Higher specificity + !important needed here specifically: the shared
       Orders-table mobile rule (.woocommerce-MyAccount-content
       .woocommerce-orders-table td) sets justify-content:space-between
       !important on every cell including this one — only a problem on
       mobile, since that shared rule only exists inside this same
       max-width:768px breakpoint. Desktop's plain .ngd-dancer-actions rule
       above has no such conflict and stays centered. */
    .woocommerce-MyAccount-content .ngd-dancers-table .ngd-dancer-actions {
        justify-content: flex-end !important;
    }
}