/*
 * Page Collection — barre d'outils, vue liste et panneau de tags.
 * La tuile de carte vit dans card-tile.css, la grille dans components.css.
 */

.collection-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-width: 0;
}

.collection-toolbar__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: 0.4rem 0.55rem 0.5rem 0.2rem;
    background:
        linear-gradient(
            90deg,
            rgba(248, 231, 160, 0.07) 0%,
            rgba(21, 120, 196, 0.08) 22%,
            rgba(124, 77, 255, 0.07) 44%,
            rgba(211, 32, 42, 0.07) 66%,
            rgba(0, 115, 62, 0.07) 88%,
            transparent 100%
        );
}

.collection-toolbar__primary .field--search {
    position: relative;
    flex: 1 1 16rem;
    max-width: none;
    background-color: #141022;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 transparent,
        0 0 16px rgba(78, 205, 196, 0.1);
}

.collection-toolbar__primary .field--search::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    right: 0.7rem;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--mana-w),
        #5bb4f0,
        #b89bff,
        var(--mana-r),
        #3dcc7a,
        var(--mana-c)
    );
    pointer-events: none;
}

.collection-toolbar__primary .field--search:focus-within {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 18px rgba(78, 205, 196, 0.22);
}

.collection-toolbar__primary .field__glyph {
    color: #7ee8dc;
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.55);
}

.collection-toolbar__end .segmented__btn {
    --g: 140, 150, 255;
}

.collection-toolbar__end .segmented__btn.is-active {
    color: #f4f5ff;
}

.collection-filters-toggle {
    --btn-c: #f6e7b0;
    --btn-g: 232, 200, 74;
    --btn-fill: #1c1810;
    --btn-sole: rgba(232, 200, 74, 0.88);
}

.collection-filters-toggle.is-busy {
    color: #fff4c8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -3px 0 #e8c84a,
        0 0 16px rgba(232, 200, 74, 0.32);
}

.collection-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.collection-filters-toggle__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.3rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    color: var(--gold-light);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.collection-filters-toggle__count[hidden] {
    display: none;
}

.collection-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    background:
        linear-gradient(180deg, rgba(180, 190, 255, 0.06), transparent 28%),
        var(--surface-sunken);
    box-shadow:
        inset 0 1px 0 rgba(232, 200, 74, 0.22),
        inset 0 -1px 0 rgba(78, 205, 196, 0.1);
}

.collection-filters[hidden] {
    display: none;
}

.collection-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.collection-filters__row .rarity-chips {
    gap: 0.45rem;
}

.collection-filters__clear {
    margin-left: auto;
}

.collection-filters__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.collection-toolbar .toolbar {
    margin-bottom: 0;
    gap: var(--space-3) var(--space-4);
}

.collection-filters .field__label,
.collection-filters .toolbar .field__label {
    min-width: 7.25rem;
    flex-shrink: 0;
    padding-right: 0.35rem;
    padding-left: 0.5rem;
    border-left: 3px solid currentColor;
    line-height: 1.2;
}

.collection-filters .field__label--keywords {
    color: #6ec8ff;
}

.collection-filters .field__label--binders {
    color: #e8c84a;
}

.collection-filters .field__label--tools {
    color: #c4a0ff;
}

/* Rangée classeurs de la barre d'outils */
.toolbar--keywords {
    align-items: flex-start;
}

.toolbar--keywords .field__label {
    padding-top: 0.35rem;
}

.chip-row--keywords {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    gap: 0.45rem 0.55rem;
}

.chip-row--keywords .chip {
    font-style: italic;
    padding: 0.32rem 0.82rem;
}

.chip-row--keywords .chip--sky { --g: 90, 180, 255; color: #9ed8ff; }
.chip-row--keywords .chip--gold { --g: 232, 200, 74; color: #f0d88a; }
.chip-row--keywords .chip--toxic { --g: 90, 200, 90; color: #9eec9e; }
.chip-row--keywords .chip--ember { --g: 232, 140, 70; color: #ffc090; }
.chip-row--keywords .chip--flame { --g: 232, 93, 4; color: #ffb080; }
.chip-row--keywords .chip--moss { --g: 60, 180, 90; color: #8ee4a8; }
.chip-row--keywords .chip--rose { --g: 232, 120, 160; color: #ffb8d0; }
.chip-row--keywords .chip--red { --g: 232, 70, 70; color: #ff9a9a; }
.chip-row--keywords .chip--leaf { --g: 80, 200, 110; color: #9eecb0; }
.chip-row--keywords .chip--violet { --g: 160, 110, 230; color: #d0b8ff; }
.chip-row--keywords .chip--slate { --g: 140, 160, 190; color: #c0d0e8; }
.chip-row--keywords .chip--cyan { --g: 70, 210, 220; color: #8eecf0; }
.chip-row--keywords .chip--teal { --g: 60, 190, 170; color: #8ee8d8; }
.chip-row--keywords .chip--silver { --g: 200, 210, 220; color: #e4eaf0; }
.chip-row--keywords .chip--orchid { --g: 190, 120, 230; color: #e0b8ff; }
.chip-row--keywords .chip--azure { --g: 110, 150, 255; color: #b0c8ff; }
.chip-row--keywords .chip--lilac { --g: 180, 160, 255; color: #d0c8ff; }

.collection-filters .field--edition .field__label { color: #e8c84a; }
.collection-filters .field--edition .field__control {
    box-shadow: inset 0 -2px 0 #c9a227;
}

.collection-filters .field--deck .field__label { color: #6ec8ff; }
.collection-filters .field--deck .field__control {
    box-shadow: inset 0 -2px 0 #3a8ec8;
}

.collection-filters .field--role .field__label { color: #c4a0ff; }
.collection-filters .field--role .field__control {
    box-shadow: inset 0 -2px 0 #7c5cbf;
}

.collection-filters__clear {
    --btn-c: #ffb0a8;
    --btn-g: 232, 90, 80;
    --btn-fill: #241014;
    --btn-sole: rgba(232, 90, 80, 0.8);
}

.collection-tool-btn--tags {
    --btn-c: #e0b8ff;
    --btn-g: 180, 100, 230;
    --btn-fill: #1c1230;
    --btn-sole: rgba(180, 100, 230, 0.85);
}

.collection-tool-btn--csv {
    --btn-c: #8ee4a8;
    --btn-g: 60, 180, 90;
    --btn-fill: #102018;
    --btn-sole: rgba(60, 180, 90, 0.85);
}

.collection-tool-btn--manabox {
    --btn-c: #6ec8ff;
    --btn-g: 70, 160, 230;
    --btn-fill: #101828;
    --btn-sole: rgba(70, 160, 230, 0.85);
}

.toolbar--binders {
    gap: var(--space-4);
    flex-wrap: nowrap;
}

.toolbar--binders .binder-shelf {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.collection-filters .binder-shelf--inline {
    gap: 0.55rem;
    padding: 0.2rem 0;
}

.collection-meta {
    color: color-mix(in srgb, var(--gold-light) 42%, var(--text-muted));
    font-size: var(--fs-xs);
    margin: 0 0 var(--space-3);
    font-family: var(--font-grimoire);
    font-style: italic;
}

/* Bascule grille / liste : voir .segmented dans components.css. */

/* ── Vue liste ── */

.cards-list {
    overflow-x: auto;
    max-width: 100%;
}

.cards-list__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.cards-list__table th,
.cards-list__table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.cards-list__table th {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cards-list__name { font-weight: 700; }
.cards-list__loc { color: var(--gold); font-size: 0.82rem; }
.cards-list__qty { width: 6.5rem; color: var(--gold); font-weight: 700; vertical-align: middle; }

/* En liste, le bouton de retrait redevient un bouton de tableau. */
.cards-list .card-tile__remove-btn {
    width: auto;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    border-top: 0;
}

.cards-list__row--over-committed {
    background: var(--tint-warn-soft);
}

.cards-list__row--over-committed .cards-list__decks {
    color: var(--warn);
}

.cards-list__decks {
    color: var(--deck-accent);
    font-size: 0.82rem;
    max-width: 14rem;
}

.cards-list__row--in-deck {
    background: var(--tint-deck-soft);
}

.cards-list__loc-btn {
    padding: 0.15rem 0.35rem;
    margin-left: -0.35rem;
    border: none;
    border-radius: var(--radius-card);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cards-list__loc-btn:hover {
    background: var(--gold-soft);
    color: var(--gold-light);
}

.cards-list__actions {
    white-space: nowrap;
}

/* ── Panneau de gestion des tags ── */

.collection-tags-panel { margin: var(--space-2) 0 var(--space-3); }

.tag-create-form {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-3);
}

.tag-create-form input[type="text"] {
    --cut: 8px;
    --cut-r: 10px;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 0;
    background-color: #0c0b18;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(180, 190, 255, 0.28);
    clip-path: polygon(
        var(--cut) 0,
        calc(100% - var(--cut-r)) 0,
        100% var(--cut-r),
        100% 100%,
        0 100%,
        0 var(--cut)
    );
}

.tag-create-form input[type="color"] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    cursor: pointer;
}

.tags-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

@media (max-width: 720px) {
    .collection-toolbar__end {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}