/*
 * My Collection (/account/collection[/{id}]) — styles used only by
 * resources/views/user/collection.blade.php and the cards collection.js
 * renders into it. Loaded after global.css, so rules here win at equal
 * specificity.
 *
 * Only list view is styled here. The grid is global.css's, unchanged, and the
 * shared chrome it has in common with My Artists (.artistPagination, the
 * .list-view button rules grouped with .artist-works) deliberately stays
 * there too.
 *
 * ── List view ─────────────────────────────────────────────────────────────
 *
 * A table rather than a row of cards: horizontal rules only, nothing down the
 * sides. Four columns —
 *
 *     image | name / artwork | ref | actions
 *
 * The action buttons stay absolutely positioned. Moving them out of .info
 * would break the grid's popover and the script that opens it, so the row
 * reserves their width as right padding instead, and the ref column's
 * border-right lands flush against that strip as the divider between the two.
 *
 * The headings live outside the cards so they stay put while batches load;
 * collection.js toggles .list-mode on #collectionsList. For them to line up
 * with the rows, the geometry has to agree:
 *
 *     row     border-box (declared — inline-block does not inherit it),
 *             100% wide, 420px of right padding
 *     ref     220px plus the 1px rule, ending where the strip begins
 *     strip   the remaining 420px, flush to the row's right edge
 *
 * Held back to 1100px: below that the strip plus the image and the ref column
 * leave too little for the artist and title, so narrower screens keep the card
 * row they already had.
 */

/* Grid view keeps its reference under the year and needs no column. */
#collectionsList .collections-list .piece-item .piece-ref {
    display: none;
}

#collectionsList .collection-list-head {
    display: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid #d9d9d9;
    align-items: flex-end;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7f7f7f;
}

@media screen and (min-width: 1100px) {
    #collectionsList.list-mode:not(.is-empty) .collection-list-head {
        display: flex;
    }

    #collectionsList .collection-list-head .col-name {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 220px of content, then the 1px the row's divider occupies. Width is what
       places the reference: the divider stays flush against the action strip,
       so widening the column is what carries the centred text leftwards, away
       from the buttons. Must stay in step with .piece-ref below. */
    #collectionsList .collection-list-head .col-ref {
        flex: 0 0 220px;
        margin-right: 1px;
        text-align: center;
    }

    #collectionsList .collection-list-head .col-action {
        flex: 0 0 420px;
        text-align: right;
    }

    /* ── Rows ─────────────────────────────────────────────────────────── */

    /* The rows live inside .collections-list, the headings do not, and the grid
       pulls that container out by -1.5% a side so its cards sit flush with the
       page edge (global.css, min-width 400px). Nothing put it back for list
       view, so every row ran ~16px wider than the headings at both ends.
       Columns can only line up while the two share an edge. */
    #collectionsList.list-mode .collections-list {
        margin-left: 0;
        margin-right: 0;
    }

    /* Restates what global.css sets from 400px up, so the padding below is
       taken out of the width rather than added to it whatever happens to that
       rule — the whole column geometry rests on it. */
    #collectionsList .collections-list .piece-item.list-view {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 4px 420px 4px 0;
        box-shadow: none;
        border-radius: 0;
        border-bottom: 1px solid #e6e6e6;
    }

    /* Clears the text from the image, which the centred grid card never had
       to do. */
    #collectionsList .collections-list .piece-item.list-view .image {
        margin: 0 25px 0 0;
    }

    #collectionsList .collections-list .piece-item.list-view .info {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The divider: a rule the full height of the row, flush against
       the action strip, so nothing pads the gap between them. Stretching the
       column is what gives the rule its height, which is why the reference is
       centred by this box rather than by text-align. */
    #collectionsList .collections-list .piece-item.list-view .piece-ref {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        flex: 0 0 220px;
        /* stretch fills the row's content box, which excludes its 4px of
           vertical padding — leaving the rule short of the horizontal rules at
           both ends. Cancelling that padding here spans the full row. */
        margin: -4px 0;
        padding: 0;
        border-right: 1px solid #d9d9d9;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #b2b2b2;
    }

    /* Spread across the strip, finishing flush at the row's right edge. */
    #collectionsList .collections-list .piece-item.list-view .info .info-contents .buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        width: 420px;
        max-width: none;
        left: auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        text-align: right;
    }

    #collectionsList .collections-list .piece-item.list-view .info .info-contents .buttons a,
    #collectionsList .collections-list .piece-item.list-view .info .info-contents .buttons button {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 6px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* space-between pins the first button to the edge of the strip, which is
       the ref column's divider — so it needs its own gap to sit off the rule. */
    #collectionsList .collections-list .piece-item.list-view .info .info-contents .buttons > :first-child {
        padding-left: 22px;
    }

    /* The lines beside the image ran together: in the grid this block is
       centred and short, so every child carries margin-bottom 0 against an
       18px line-height. */
    #collectionsList .collections-list .piece-item.list-view .info .info-contents > p:not(.buttons),
    #collectionsList .collections-list .piece-item.list-view .info .info-contents > h3 {
        margin: 0 0 7px;
    }

    #collectionsList .collections-list .piece-item.list-view .info .info-contents > h3 {
        line-height: 20px;
    }

    /* Last line in the block, so nothing to separate it from. */
    #collectionsList .collections-list .piece-item.list-view .info .info-contents > p.time-location {
        margin-bottom: 0;
    }
}

/* A long piece name ran out of its card and over the ones beside it: a word
   with no break in it (a long title, a URL) can't wrap, and the card doesn't
   clip. Long words break, and past two lines the name ends in an ellipsis. */
#collectionsList .collections-list .piece-item .info h3.piece-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Loading / empty / error strip ─────────────────────────────────────
   collection.js writes the paging state here. It had no styling at all, so
   the first paint of the page showed a bare, left-aligned "Loading…" in the
   browser's default type. Matched to the same strip on My Artists. */

.collection-status {
    padding: 40px 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #858585;
}

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

.collection-status.error {
    color: #B00020;
}

.collection-status .retry {
    margin-left: 10px;
    cursor: pointer;
    color: #000;
    text-decoration: underline;
}

/* Choose Action modal: the lists that open under "Add to Collection" and the
   two "Add to … Room" options. Their items are inline labels by default, so
   names flowed side by side and wrapped into ragged rows with uneven gaps —
   worst for collections, which also had full-size checkboxes and unstyled
   text. One compact row per item, lettered like the options above. */
#generateSummaryModalContainer .room-list {
    padding-left: 30px;
    margin: 0 0 15px;
    max-height: 220px;
    overflow-y: auto;
}

#generateSummaryModalContainer .room-list .brand-radio,
#generateSummaryModalContainer .room-list .brand-checkbox {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
}

#generateSummaryModalContainer .room-list .brand-radio > span:first-of-type,
#generateSummaryModalContainer .room-list .brand-checkbox > span:first-of-type {
    flex: 0 0 auto;
    margin-right: 10px;
}

#generateSummaryModalContainer .room-list label span + span {
    line-height: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* How many pieces are chosen, whichever page of the grid is showing. */
.selection-count {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100;
    max-width: calc(100% - 32px);
    padding: 10px 22px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}

.selection-count[hidden] {
    display: none;
}


/* ── Notes and Tags popups on a piece card ─────────────────────────────── */

.piece-edit-modal .modal-title {
    margin-bottom: 20px;
}

.piece-edit-modal .notes-list {
    max-height: 55vh;
    overflow-y: auto;
}

.piece-edit-modal .note-row {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E6E6;
}

.piece-edit-modal .note-row .note-title {
    margin-bottom: 8px;
}

.piece-edit-modal .note-row .remove-note {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #7F7F7F;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.piece-edit-modal .notes-empty {
    margin: 0 0 16px;
    color: #7F7F7F;
    font-size: 13px;
    text-align: center;
}

.piece-edit-modal .notes-add,
.piece-edit-modal .modal-actions {
    margin: 0;
    text-align: center;
}

.piece-edit-modal .notes-add {
    margin-bottom: 16px;
}

.piece-edit-modal .modal-error {
    min-height: 18px;
    margin: 0 0 10px;
    color: #D0021B;
    font-size: 13px;
    text-align: center;
}

/* Tagify, as on the By Collection page. */
.piece-edit-modal .tagify {
    --tagify-dd-color-primary: transparent;
    width: 100%;
    min-height: 38px;
    border-radius: 3px;
    box-sizing: border-box;
}

.piece-edit-modal .tagify.tagify--focus {
    border-color: #cecece;
}

.tags-look {
    border: 1px solid #cecece;
    box-sizing: border-box;
}

.tags-look .tagify__dropdown__item {
    display: inline-block;
    margin: .2em;
    padding: .3em .5em;
    border: 1px solid #CCC;
    border-radius: 3px;
    background: #F3F3F3;
    color: black;
    font-size: 12px;
    transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
    color: black;
}

.tags-look .tagify__dropdown__item:hover {
    background: #cecece;
    border-color: #F1F1F1;
}

/* ── Tags popup ── */
.piece-edit-modal .modal-subtitle {
    margin: -18px 0 26px;
    overflow: hidden;
    color: #7F7F7F;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.piece-edit-modal .tags-section {
    margin-bottom: 22px;
}

.piece-edit-modal .tags-section + .tags-section {
    padding-top: 20px;
    border-top: 1px solid #E6E6E6;
}

.piece-edit-modal .tags-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.piece-edit-modal .tags-label {
    color: #000;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.piece-edit-modal .tags-count {
    color: #7F7F7F;
    font-size: 11px;
    letter-spacing: 1px;
}

.piece-edit-modal .tags-section .form-group {
    margin-bottom: 8px;
}

.piece-edit-modal .tags-hint {
    margin: 0;
    color: #9B9B9B;
    font-size: 11px;
    line-height: 16px;
}

/* A piece's collection tags: shown, but not removable. */
.piece-edit-modal .collection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.piece-edit-modal .collection-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px dashed #CECECE;
    border-radius: 3px;
    background: #FAFAFA;
    color: #4A4A4A;
    font-size: 12px;
}

/* A small padlock, drawn so no extra image is needed. */
.piece-edit-modal .collection-tag::before {
    content: "";
    width: 9px;
    height: 10px;
    flex: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 4.5V3a2.5 2.5 0 0 1 5 0v1.5' fill='none' stroke='%239B9B9B' stroke-width='1.2'/%3E%3Crect x='.5' y='4.5' width='8' height='5' rx='1' fill='%239B9B9B'/%3E%3C/svg%3E");
}

.piece-edit-modal .modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.piece-edit-modal .modal-actions .brand-btn {
    min-width: 120px;
    margin: 0;
}

.modal-container .modal-content.piece-edit-modal {
    padding: 48px 56px 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .modal-container .modal-content.piece-edit-modal {
        width: 70%;
    }
}

@media (max-width: 767px) {
    .modal-container .modal-content.piece-edit-modal {
        width: calc(100% - 32px);
        padding: 36px 20px 28px;
    }
}