/* ================================================================
   SelectPlayerDialog.css — select-player-dialog-only styles (spd-)
   Shared chrome (dlg-) lives in css/dialogs.css.
   Linked in App.razor: <link rel="stylesheet" href="css/SelectPlayerDialog.css" />
================================================================ */

    .spd-count {
        margin-left: auto;
        font-family: 'DM Mono', monospace;
        font-size: 11px;
        font-weight: 600;
        background: rgba(99,102,241,0.10);
        border: 1px solid rgba(99,102,241,0.22);
        color: var(--mud-palette-primary);
        border-radius: 20px;
        padding: 1px 8px;
        flex-shrink: 0;
    }

    .spd-count--selected {
        background: var(--mud-palette-primary);
        color: white;
        border-color: var(--mud-palette-primary);
    }

    /* ── Body ─────────────────────────────────────────────────── */
    .spd-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 2px 0 4px;
    }

    /* ── Search row — grid so all 3 are same height ───────────── */
    .spd-search-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 8px;
        align-items: stretch;
    }

    /* ── Select bar ───────────────────────────────────────────── */
    .spd-select-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        background: var(--mud-palette-background-grey);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 7px;
    }

    .spd-select-all-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        color: var(--mud-palette-primary);
        font-family: 'DM Sans', sans-serif;
        padding: 0;
    }

    .spd-clear-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        color: var(--mud-palette-error);
        font-family: 'DM Sans', sans-serif;
        padding: 0;
    }

    /* ── Player list ──────────────────────────────────────────── */
    .spd-list {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 10px;
        overflow: hidden;
        max-height: 460px;
        overflow-y: auto;
    }

    /* ── Player block ─────────────────────────────────────────── */
    .spd-player-block {
        border-bottom: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-surface);
    }

        .spd-player-block:last-child {
            border-bottom: none;
        }

    .spd-player-block--selected {
        background: rgba(99,102,241,0.04);
        border-left: 3px solid var(--mud-palette-primary);
    }

    /* ── Player row ───────────────────────────────────────────── */
    .spd-player-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        cursor: pointer;
        transition: background 0.12s;
    }

        .spd-player-row:hover {
            background: var(--mud-palette-action-hover);
        }

    .spd-player-row--added {
        cursor: default;
        opacity: 0.55;
    }

        .spd-player-row--added:hover {
            background: var(--mud-palette-surface);
        }

    .spd-checkbox {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .spd-player-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .spd-player-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        font-family: 'DM Sans', sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .spd-player-name--dim {
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .spd-player-pills {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    .spd-pill {
        font-size: 10px;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .spd-pill--level {
        background: rgba(46,125,50,0.10);
        border: 1px solid rgba(46,125,50,0.25);
        color: #4caf50;
    }

    .spd-pill--gender {
        background: rgba(2,136,209,0.10);
        border: 1px solid rgba(2,136,209,0.25);
        color: #0288D1;
    }

    /* ── Doubles controls ─────────────────────────────────────── */
    .spd-doubles-ctrl {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    /* ── Inline pair pill ─────────────────────────────────────── */
    .spd-pair-inline {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(46,125,50,0.08);
        border: 1px solid rgba(46,125,50,0.22);
        border-radius: 20px;
        padding: 2px 6px 2px 4px;
        margin-right: 4px;
    }

    .spd-pair-plus {
        font-size: 12px;
        font-weight: 700;
        color: #4caf50;
    }

    .spd-pair-name {
        font-size: 11px;
        font-weight: 700;
        color: #4caf50;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .spd-pair-remove {
        font-size: 10px;
        font-weight: 700;
        color: #4caf50;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 1px;
        line-height: 1;
        opacity: 0.7;
        transition: all 0.12s;
    }

        .spd-pair-remove:hover {
            opacity: 1;
            color: var(--mud-palette-error);
        }

    /* ── Partner choice buttons ───────────────────────────────── */
    .spd-pc-btn {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 3px 7px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 600;
        font-family: 'DM Sans', sans-serif;
        cursor: pointer;
        border: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-background-grey);
        color: var(--mud-palette-text-secondary);
        transition: all 0.12s;
        white-space: nowrap;
    }

        .spd-pc-btn:hover {
            border-color: var(--mud-palette-primary);
            color: var(--mud-palette-primary);
        }

    .spd-pc-btn--active {
        background: rgba(99,102,241,0.12) !important;
        border-color: var(--mud-palette-primary) !important;
        color: var(--mud-palette-primary) !important;
    }

    .spd-pc-btn--active-warning {
        background: rgba(237,108,2,0.12) !important;
        border-color: #ED6C02 !important;
        color: #ED6C02 !important;
    }

    .spd-pc-btn--active-success {
        background: rgba(46,125,50,0.12) !important;
        border-color: #4caf50 !important;
        color: #4caf50 !important;
    }

    /* ── Partner picker ───────────────────────────────────────── */
    .spd-partner-picker {
        margin: 0 12px 8px 42px;
        border: 1px solid rgba(99,102,241,0.20);
        border-radius: 8px;
        overflow: hidden;
        animation: spdSlideDown 0.15s ease;
    }

    @@keyframes spdSlideDown {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .spd-partner-search {
        margin: 7px 8px 4px;
        width: calc(100% - 16px);
    }

    .spd-partner-list {
        max-height: 160px;
        overflow-y: auto;
        padding: 2px 0;
    }

    .spd-partner-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        cursor: pointer;
        transition: background 0.1s;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

        .spd-partner-row:first-child {
            border-top: none;
        }

        .spd-partner-row:hover {
            background: var(--mud-palette-action-hover);
        }

    .spd-partner-empty {
        padding: 10px;
        text-align: center;
        font-size: 12px;
        color: var(--mud-palette-text-disabled);
    }

    /* ── Empty ────────────────────────────────────────────────── */
    .spd-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 32px 16px;
        text-align: center;
        color: var(--mud-palette-text-disabled);
    }

    .spd-empty-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .spd-empty-sub {
        font-size: 12px;
    }

    /* ── Already added ────────────────────────────────────────── */
    .spd-added-section {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
        overflow: hidden;
    }

    .spd-added-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 8px 12px;
        background: var(--mud-palette-background-grey);
        border: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        font-family: 'DM Sans', sans-serif;
        text-align: left;
    }

        .spd-added-toggle:hover {
            background: var(--mud-palette-action-hover);
        }

    .spd-added-list {
        border-top: 1px solid var(--mud-palette-lines-default);
        max-height: 160px;
        overflow-y: auto;
    }

    .spd-added-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 20px;
        background: rgba(46,125,50,0.10);
        border: 1px solid rgba(46,125,50,0.25);
        color: #4caf50;
    }

    /* ── Summary ──────────────────────────────────────────────── */
    .spd-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(99,102,241,0.06);
        border: 1px solid rgba(99,102,241,0.18);
        border-radius: 8px;
        font-size: 13px;
        color: var(--mud-palette-text-primary);
    }

    .spd-summary-detail {
        color: var(--mud-palette-text-secondary);
        font-size: 12px;
        margin-left: 2px;
    }

        .spd-summary-detail span {
            margin-right: 2px;
        }

    .spd-summary-warn {
        color: var(--mud-palette-warning) !important;
        font-weight: 600;
    }