/* Scope everything to Registered tab */
#registered {
    background: #4FC3F7;
    border-radius: 8px;
    padding: 8px;
}

#registered .registered-btn {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 90px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #FFF176;
    color: #000;
    font-weight: 600;
    cursor: pointer;
}

#registered .registered-btn:hover {
    background: #FFE082;
}

#registered .registered-btn:active,
#registered .registered-btn:focus-visible {
    border-color: #000;
}

#registered .registered-status {
    margin-top: 8px;
    color: #065f46;
    font-weight: 600;
}

#registered #registeredFilters input,
#registered #registeredFilters select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #c9def5;
    background: #d8eaff;
    font-size: 14px;
}

#registered #registeredDate {
    max-width: 140px;
    width: 140px;
}

#registered #registeredFilters label {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

#registered #registeredFilters .row {
    gap: 6px;
}

#registered .registered-table {
    margin-top: 12px;
    background: #4FC3F7;
    border-radius: 8px;
    overflow: auto;
    width: 100%;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

#registered .registered-table-grid {
    border-collapse: collapse;
    table-layout: fixed;
    --col-name: 120px;
    --col-index: 50px;
    --col-tee: 80px;
    --col-hdcp: 60px;
    --col-remove: 80px;
    width: calc(
        var(--col-name)
        + var(--col-index)
        + var(--col-tee)
        + var(--col-hdcp)
        + var(--col-remove)
    );
    min-width: calc(
        var(--col-name)
        + var(--col-index)
        + var(--col-tee)
        + var(--col-hdcp)
        + var(--col-remove)
    );
    box-sizing: border-box;
}

#registered .registered-table-grid th,
#registered .registered-table-grid td {
    padding: 6px 4px;
    border-right: 1px solid #000;
    text-align: center;
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#registered .registered-table-grid thead th {
    background: #9e9e9e;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
}

#registered .registered-table-grid tbody tr:nth-child(even) td {
    background: #81C784;
}

#registered .registered-table-grid tbody tr:nth-child(odd) td {
    background: #FFF176;
}

#registered .registered-table-grid .col.name,
#registered .registered-table-grid .col-name {
    width: var(--col-name);
    text-align: left;
    padding-left: 8px;
    position: sticky;
    left: 0;
    z-index: 3;
}

#registered .registered-table-grid .col.index,
#registered .registered-table-grid .col-index { width: var(--col-index); }

#registered .registered-table-grid .col.tee,
#registered .registered-table-grid .col-tee { width: var(--col-tee); }

#registered .registered-table-grid .col.hdcp,
#registered .registered-table-grid .col-hdcp { width: var(--col-hdcp); }

#registered .registered-table-grid .col.remove,
#registered .registered-table-grid .col-remove { width: var(--col-remove); border-right: none; }

#registered .registered-table-grid thead th.col.name,
#registered .registered-table-grid thead th.col-name {
    z-index: 4;
}

#registered .registered-table-grid tbody tr:nth-child(even) td.col.name,
#registered .registered-table-grid tbody tr:nth-child(even) td.col-name {
    background: #81C784;
}

#registered .registered-table-grid tbody tr:nth-child(odd) td.col.name,
#registered .registered-table-grid tbody tr:nth-child(odd) td.col-name {
    background: #FFF176;
}

body:not(.admin-mode) #registered .registered-table-grid {
    --col-remove: 0px;
}

body:not(.admin-mode) #registered .registered-table-grid col.col-remove,
body:not(.admin-mode) #registered .registered-table-grid th.col.remove,
body:not(.admin-mode) #registered .registered-table-grid td.col.remove {
    display: none;
}

/* 🎨 Tee Colors */
.tee-gold {
    background-color: #d4af37;
    color: #000;
}

.tee-white {
    background-color: #f5f5f5;
    color: #000;
    border: 1px solid #ccc;
}

.tee-blue {
    background-color: #4da3ff;
    color: #fff;
}

.tee-red {
    background-color: #e74c3c;
    color: #fff;
}

.tee-default {
    background-color: #ccc;
    color: #000;
}

/* Empty state */
#registered .empty {
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

#registered #registeredFilters {
    margin-bottom: 10px;
    gap: 6px;
}

#registered #registeredFilters input,
    #registeredFilters select {
        margin-bottom: 6px;
}

#registered .remove-btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: #ef4444;
    color: white;
    cursor: pointer;
}

#registered .remove-btn:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}