/*#region Members grid */
.members-grid {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) 140px 75px 75px 115px 115px;
    width: 100%;
}

.members-section-header {
    display: contents;
}

.members-section-title {
    font-size: var(--font-h3);
    font-weight: bold;
    padding: 20px 0 6px;
    color: var(--black-lighter);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: center;
    gap: 8px;
}

.members-col-header {
    padding: 4px 8px 8px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-dark);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.members-row {
    display: contents;
}

.members-row > div {
    padding: 7px 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-lighter);
}

.members-row:hover > div {
    background-color: var(--gray-lighter);
}

.members-cell-dob {
    justify-content: center;
    text-align: center;
}

.members-cell-name {
    font-weight: 500;
}

.members-cell-sex {
    justify-content: center;
    font-size: 1.1em;
}

.members-cell-sex-male {
    color: var(--blue);
}
.members-cell-sex-female {
    color: var(--pink);
}

.members-cell-proficiency {
    justify-content: center;
}

.members-cell-actions {
    justify-content: flex-end;
    gap: 6px;
}

.members-cell-actions form.sbf {
    width: 100%;
}

.members-row.editing > div {
    display: none;
}

.members-edit-row {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    border-bottom: 1px solid var(--gray-lighter);
    background-color: var(--gray-lighter);
}

.members-edit-row.visible {
    display: grid;
}

.members-edit-row form {
    display: contents;
}

.edit-form-fields {
    grid-column: 1 / 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 8px;
    align-items: center;
}

.edit-form-fields input,
.edit-form-fields select {
    flex: 1;
    min-width: 120px;
    padding: 5px 8px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
    box-sizing: border-box;
}

.edit-form-fields select {
    padding-right: 22px;
}

.edit-form-fields input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 150px;
}

.edit-form-fields select[name="sex"] {
    min-width: 150px;
}

.members-edit-row input[type="submit"],
.members-edit-row button.table-btn {
    margin-inline: 8px;
    width: calc(100% - 16px);
}

.members-empty {
    grid-column: 1 / -1;
    padding: 10px 8px;
    color: var(--gray-dark);
    font-size: var(--font-small);
}

/* Grid layout variants */
.members-grid--approval {
    grid-template-columns: minmax(150px, 2fr) minmax(
            120px,
            1fr
        ) 140px 50px 40px 100px 100px;
}
.members-grid--clubs {
    grid-template-columns: minmax(150px, 2fr) 40px 140px 50px minmax(
            120px,
            1.5fr
        ) 100px 100px 100px;
}
.members-grid--referees {
    grid-template-columns: minmax(150px, 2fr) minmax(80px, 1fr) 90px minmax(
            100px,
            1fr
        ) 140px 115px 115px;
}
.members-grid--weapons {
    grid-template-columns: 50px 1fr;
}
.weapons-name-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
    box-sizing: border-box;
}
.weapons-add-form {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
}
.weapons-add-form .weapons-name-input {
    flex: 1;
}
.weapons-add-form input[type="submit"] {
    width: auto;
    min-width: 80px;
}
.members-grid--pools {
    grid-template-columns: minmax(150px, 2fr) 60px 100px;
}
.members-grid--pool-detail {
    grid-template-columns: minmax(150px, 2fr) minmax(110px, 1fr) 100px;
}

/* Column header modifiers */
.members-col-header--center {
    justify-content: center;
    text-align: center;
}
.members-col-header--left {
    justify-content: flex-start;
}
.members-col-header--span-2 {
    grid-column: span 2;
}
.members-col-header--span-3 {
    grid-column: span 3;
}

/* Cell modifiers */
.members-cell-center {
    justify-content: center;
}.members-cell-pool {
    padding: 4px 8px;
}

.add-member-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 4px 3px;
}

.add-member-grid input:not([type="submit"]),
.add-member-grid select {
    flex: 1;
    min-width: 120px;
    padding: 5px 8px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
    box-sizing: border-box;
}

.add-member-grid select {
    padding-right: 22px;
}

.add-member-grid input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 150px;
}

.add-member-grid--referees {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) minmax(80px, 1fr) 90px minmax(
            0,
            1fr
        ) 140px auto auto;
}

/*#endregion */
/*#region Managed account search */

.managed-search-section {
    margin-top: 6px;
    padding: 8px 3px 20px;
    border-top: 1px solid var(--gray-lighter);
}

.managed-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
            0,
            140px
        ) minmax(0, 65px) minmax(0, 75px) auto auto;
    gap: 8px;
    align-items: center;
}

.managed-search-wrap {
    grid-column: 1 / 7;
}

.managed-search-btn-wrap {
    grid-column: 7 / 9;
    display: block;
}

.managed-search-btn-wrap > button.table-btn {
    width: auto;
}

.managed-search-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
    box-sizing: border-box;
}

.managed-search-section.open .managed-search-input {
    border-radius: 0 0 4px 4px;
}

.managed-search-dropdown {
    display: none;
    position: fixed;
    z-index: 300;
    background: var(--white);
    border: 1px solid var(--gray-darker);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
}

.managed-search-section.open .managed-search-dropdown {
    display: block;
}

.managed-search-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: var(--font-small);
    cursor: pointer;
}

.managed-search-option:hover,
.managed-search-option.focused {
    background-color: var(--gray);
}

.managed-search-option.is-member {
    opacity: 0.5;
    cursor: default;
}

.managed-search-option-name {
    font-weight: 500;
    flex-shrink: 0;
}

.managed-search-option-dob {
    color: var(--gray-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.managed-search-option-clubs {
    color: var(--gray-dark);
    font-size: var(--font-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.managed-search-option-note {
    font-size: var(--font-xs);
    color: var(--gray-dark);
    white-space: nowrap;
    margin-left: auto;
}

.managed-search-empty {
    padding: 6px 10px;
    font-size: var(--font-small);
    color: var(--gray-dark);
}
/*#endregion */
/*#region Registrations grid */
.regs-grid {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) 90px;
    width: 100%;
}

.regs-section-header {
    display: contents;
}

.regs-section-title {
    font-size: var(--font-h3);
    font-weight: bold;
    padding: 20px 0 6px;
    color: var(--black-lighter);
    border-bottom: 2px solid var(--black-darker);
    min-width: 0;
}

.regs-col-header {
    padding: 4px 8px 8px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-dark);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
}

.regs-row {
    display: contents;
}

.regs-row > div {
    padding: 7px 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-lighter);
}

.regs-row:hover > div {
    background-color: var(--gray-lighter);
}

.regs-cell-name {
    font-weight: 500;
}

.regs-cell-detail {
    color: var(--gray-dark);
}
.regs-empty {
    grid-column: 1 / -1;
    padding: 10px 8px;
    color: var(--gray-dark);
    font-size: var(--font-small);
}
.regs-grid--users {
    grid-template-columns: minmax(220px, 1.5fr) minmax(
            180px,
            10fr
        ) 130px 110px 120px;
}
.regs-grid--managed {
    grid-template-columns: minmax(150px, 2fr) minmax(150px, 2fr) 130px 130px;
}
.regs-grid--duplicates {
    grid-template-columns: 24px minmax(200px, 2fr) minmax(
            180px,
            3fr
        ) 130px 130px 100px;
}

.regs-section-title--span-2 {
    grid-column: span 2;
}

.regs-col-header--center {
    justify-content: center;
}
.regs-cell-center {
    justify-content: center;
}
.regs-cell-detail--full {
    grid-column: 1 / -1;
}

.regs-grid--2col {
    grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr);
}

.regs-grid--players-list {
    grid-template-columns: minmax(150px, 2fr) minmax(120px, 1fr) minmax(200px, 3fr);
}

.club-pill {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    background: var(--gray-lighter, #eef2f5);
    border: 1px solid var(--gray-darker, #cfd6dc);
    border-radius: 999px;
    color: inherit;
    font-size: 0.9em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.club-pill:hover {
    background: #e2eef7;
    border-color: #3498db;
}
.regs-grid--3col-event {
    grid-template-columns: minmax(150px, 2fr) minmax(140px, 2fr) minmax(
            140px,
            2fr
        );
}
.regs-grid--3col-supporters {
    grid-template-columns: minmax(150px, 2fr) minmax(140px, 2fr) minmax(
            100px,
            1fr
        );
}
.regs-grid--1col-dialog {
    grid-template-columns: minmax(150px, 2fr);
}
.regs-grid--dialog-players {
    grid-template-columns: minmax(150px, 2fr) 80px minmax(100px, 1.5fr) 80px;
}
.regs-grid--participants {
    grid-template-columns: minmax(150px, 2fr) minmax(140px, 2fr) 80px minmax(
            100px,
            1.2fr
        ) 80px;
}
.regs-grid--manage-players {
    grid-template-columns: minmax(150px, 2fr) minmax(140px, 2fr) 80px minmax(
            100px,
            1.2fr
        ) 80px minmax(100px, 1fr);
}
.regs-grid--ref-list {
    grid-template-columns: minmax(150px, 2fr) minmax(100px, 1.5fr) minmax(
            120px,
            1.5fr
        ) minmax(100px, 1.2fr) minmax(120px, 1.2fr);
}
.regs-cell-name a {
    text-decoration: none;
}
.regs-cell-name a:hover {
    text-decoration: underline;
}

.entity-link {
    color: var(--blue-lighter);
    text-decoration: none;
}
.entity-link:hover {
    text-decoration: underline;
}
/*#endregion*/
/*#region Fees grid */
.fees-grid {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) minmax(
            100px,
            1fr
        ) minmax(100px, 1fr);
    width: 100%;
}

.fees-section-header {
    display: contents;
}

.fees-section-title {
    font-size: var(--font-h3);
    font-weight: bold;
    padding: 20px 0 6px;
    color: var(--black-lighter);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
}

.fees-col-header {
    padding: 4px 8px 8px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-dark);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.fees-row {
    display: contents;
}

.fees-row > div {
    padding: 7px 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-lighter);
}

.fees-row:hover > div {
    background-color: var(--gray-lighter);
}

.fees-row--total > div {
    font-weight: 600;
    background-color: var(--gray);
    /* border-top: 2px solid var(--gray-darker); */
    border-bottom: none;
}

.fees-row--total:hover > div {
    background-color: var(--gray-darker);
}

.fees-cell-name {
    font-weight: 500;
}

.fees-cell-amount {
    color: var(--gray-dark);
    font-family: "Roboto Mono", Consolas, Menlo, monospace;
    justify-content: flex-end;
    text-align: right;
}

.fees-empty {
    grid-column: 1 / -1;
    padding: 10px 8px;
    color: var(--gray-dark);
    font-size: var(--font-small);
}

.export-action {
    margin-top: 12px;
}

.fees-overall {
    margin-top: 12px;
    padding: 10px 8px;
    font-size: var(--font-h3);
    font-weight: bold;
    font-family: "Roboto Mono", Consolas, Menlo, monospace;
    text-align: right;
    border-top: 2px solid var(--black-darker);
}
/*#endregion*/
/*#region Categories grid */
.categories-grid {
    display: grid;
    grid-template-columns: minmax(120px, 2fr) 85px 85px 60px minmax(
            100px,
            1.5fr
        ) 55px 65px 85px 110px;
    width: 100%;
}

.categories-section-header {
    display: contents;
}

.categories-section-title {
    font-size: var(--font-h3);
    font-weight: bold;
    padding: 20px 0 6px;
    color: var(--black-lighter);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
}

.categories-col-header {
    padding: 4px 8px 8px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-dark);
    border-bottom: 2px solid var(--black-darker);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.categories-row {
    display: contents;
}

.categories-row > div {
    padding: 6px 6px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-lighter);
}

.categories-row:hover > div {
    background-color: var(--gray-lighter);
}

.categories-cell-center {
    justify-content: center;
}

.categories-cell-actions {
    justify-content: flex-end;
    gap: 4px;
}

.categories-row input[type="text"],
.categories-row input[type="number"] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background: var(--white);
    box-sizing: border-box;
}

.categories-row input[type="text"]:disabled,
.categories-row input[type="number"]:disabled {
    background: var(--gray-lighter);
    color: var(--gray-dark);
}

.categories-empty {
    grid-column: span 9;
    padding: 10px 8px;
    color: var(--gray-dark);
    font-size: var(--font-small);
}

.categories-save-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding: 4px 6px 0;
}

/*#endregion*/
/*#region Admin Venues */
.members-grid--venues {
    grid-template-columns: minmax(140px, 2fr) minmax(140px, 1fr) minmax(100px, 1fr) minmax(140px, 2fr) 170px;
}
.venue-map-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    width: 70%;
    padding: 0;
}

.venue-map-search-row--standalone {
    width: 100%;
    margin-bottom: 10px;
}

.venue-map-tip {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: var(--notice-info-bg);
    border-left: 4px solid var(--notice-info-border);
    border-radius: var(--radius);
    color: var(--notice-info-fg);
    font-size: var(--font-small);
    font-weight: 500;
}

.venue-proximity-warning--standalone {
    width: 100%;
    margin-top: 10px;
}


.venue-map-search-row input {
    flex: 7;
    width: auto;
    padding: 8px 10px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
}

.venue-map-search-row button {
    flex: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.venue-map-container {
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-darker);
    isolation: isolate;
}

.leaflet-container {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.leaflet-container .leaflet-popup-content,
.leaflet-container .leaflet-popup-content * {
    font-size: 12px;
    line-height: 1.4;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-attribution * {
    font-size: 11px;
}

.venue-proximity-warning {
    width: 70%;
    padding: 8px 12px;
    background: var(--notice-warning-bg);
    border: 1px solid var(--notice-warning-border);
    border-radius: var(--radius);
    color: var(--notice-warning-fg);
    font-size: var(--font-small);
}

.venue-map-container--page {
    width: 100%;
    height: 380px;
}

.profile-section-header + .venue-map-container {
    margin-top: 12px;
}

.venue-map-container--full {
    width: 100%;
    height: 520px;
}

.members-grid--venues-list {
    grid-template-columns: minmax(150px, 2fr) minmax(120px, 1fr) 120px minmax(150px, 3fr) auto;
}


.form-add-link {
    font-size: var(--font-small);
    color: var(--blue);
    text-decoration: none;
    padding: 2px 4px;
}

.form-add-link:hover {
    text-decoration: underline;
}

/*#endregion */
/*#region Players list */
.players-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-left: 3px;
    margin-bottom: 14px;
}

.players-filter-search,
.players-filter-country {
    padding: 6px 10px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
    box-sizing: border-box;
}

.players-filter-search {
    flex: 1 1 220px;
    min-width: 0;
}

.players-filter-country {
    flex: 0 1 240px;
}

.players-filter-submit {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius);
    background-color: var(--green);
    color: var(--white);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: bold;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.players-filter-submit:hover {
    background-color: var(--green-lighter);
}

.players-filter-clear {
    padding: 6px 10px;
    font-size: var(--font-small);
    color: var(--gray-dark);
    text-decoration: none;
}

.players-filter-clear:hover {
    text-decoration: underline;
}

.players-filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.pagination-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;

    @media (max-width: 600px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        .players-per-page {
            justify-self: auto;
        }
    }
}

.players-filters + .pagination-row {
    margin-top: 0;
}

.pagination-row .pagination {
    grid-column: 2;
    margin-top: 0;
}

.pagination-row .players-per-page {
    grid-column: 3;
    justify-self: end;
}

.players-per-page {
    font-size: var(--font-small);
    color: var(--gray-dark);
}

.players-per-page label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.players-per-page select {
    min-width: 64px;
    padding: 4px 8px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    background-color: var(--white);
}

.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    line-height: 1;
}

.sort-header:hover {
    color: var(--black);
}

.sort-arrows {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.sort-arrow {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.sort-arrow--up {
    border-bottom: 4px solid var(--gray-darker);
}

.sort-arrow--down {
    border-top: 4px solid var(--gray-darker);
}

.sort-arrow--up.sort-arrow--active {
    border-bottom-color: var(--black-lighter);
}

.sort-arrow--down.sort-arrow--active {
    border-top-color: var(--black-lighter);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    padding: 4px 10px;
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    font-size: var(--font-small);
    color: var(--black-lighter);
    text-decoration: none;
    background-color: var(--white);
    transition: background-color var(--transition-fast);
}

.pagination-link:hover {
    background-color: var(--gray-lighter);
}

.pagination-link--nav {
    background-color: var(--gray-darker);
    color: var(--gray-dark);
}

.pagination-link--nav:hover {
    background-color: var(--gray-darker);
    filter: brightness(0.95);
}

.pagination-link--current {
    background-color: var(--black-lighter);
    color: var(--white);
    border-color: var(--black-lighter);
    cursor: default;
}

.pagination-link--current:hover {
    background-color: var(--black-lighter);
}

.pagination-link--disabled {
    color: var(--gray-dark);
    background-color: var(--gray-lighter);
    cursor: not-allowed;
}

.pagination-link--disabled:hover {
    background-color: var(--gray-lighter);
}

.pagination-ellipsis {
    padding: 4px 6px;
    color: var(--gray-dark);
    font-size: var(--font-small);
}

.pagination-link-label {
    font: inherit;

    @media (max-width: 480px) {
        display: none;
    }
}
/*#endregion */
/*#region Admin duplicates */
.dup-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.dup-block {
    font-size: var(--font-small);
    padding: 4px 0;
}
.dup-td-uuid {
    font-size: var(--font-xs);
    color: var(--gray-dark);
    word-break: break-all;
}
.dup-indent { padding-left: 10px; }
.dup-merge-section { margin-top: 24px; }
.dup-section-label {
    color: var(--gray-dark);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    margin-top: 8px;
}
.dup-table {
    border-collapse: collapse;
    width: 100%;
}
.dup-table td {
    padding: 2px 6px 2px 0;
    vertical-align: top;
    font-size: var(--font-small);
}
.dup-table td:first-child {
    color: var(--gray-dark);
    white-space: nowrap;
    padding-right: 12px;
    width: 90px;
}
.dup-item {
    padding: 2px 0;
}
.dup-meta {
    color: var(--gray-dark);
    font-size: var(--font-xs);
}
.dup-group-actions {
    padding: 6px 0 2px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.empty-notice {
    padding: 16px;
    color: var(--gray-dark);
}
.copy-id-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-light);
    font: inherit;
    font-size: 0.8rem;
}
.copy-id-btn:hover {
    color: var(--black);
}
.copy-id-btn::after {
    content: attr(data-id);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--black-lighter);
    color: var(--white);
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-darker);
    pointer-events: none;
    opacity: 0;
}
.copy-id-btn:hover::after {
    opacity: 1;
}
.fill-row {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}
.fill-row .input {
    flex: 1;
}
.fill-btn {
    flex-shrink: 0;
    padding: 4px 8px;
    background: var(--gray);
    border: 1px solid var(--gray-darker);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-xs);
    color: var(--gray-dark);
    white-space: nowrap;
}
.fill-btn:hover {
    background: var(--gray-darker);
    color: var(--black);
}
.fill-btn--active {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}
.fill-btn--active:hover {
    background: var(--green-lighter);
    border-color: var(--green-lighter);
    color: var(--white);
}
/*#endregion */