/* ***************************************************************************
 * MT20 — meet collections: styles for collections.php and collection.php
 * ***************************************************************************
 *
 * Every selector here is prefixed `collection-` / `collections-`, on purpose. The directory's
 * own meet-row classes (`.meet-row-primary`, `.meet-detail-actions`) are load-bearing for
 * meets_js.js's injectMeetEmailButtons(), which finds its insertion points by those names —
 * see specs/file-structure.md §5. Nothing in this file touches them.
 *
 * The palette matches the rest of the module: rgb(36, 54, 70) headings, #2196F3 links,
 * white cards on #e0e0e0 borders.
 */

.collections-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.collection-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #2196F3;
    text-decoration: none;
    font-size: 16px;
}

.collection-back-link:hover {
    text-decoration: underline;
}

.collections-header {
    text-align: center;
    margin-bottom: 30px;
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.collections-header h1 {
    margin: 0 0 10px 0;
    color: rgb(36, 54, 70);
}

.collections-header p {
    margin: 0;
    color: #666;
}

.collection-level-note {
    margin-top: 10px !important;
    font-size: 13px;
    font-style: italic;
}

/* --- cards ------------------------------------------------------------- */

.collection-card {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.collection-new-card {
    background-color: #fafafa;
}

.collection-new-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: rgb(36, 54, 70);
}

.collection-new-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.collection-new-form .collection-input {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0;
    text-align: center;   /* MT_15787 (Alex, 2026-09-27): typed title and placeholder centred, under the centred heading */
}

/* MT_15789: the title block is centred on the CARD's full width, not on what the buttons leave.
   Three columns, the two sides equal: the buttons sit right-aligned in the third and the first
   stays empty, so the middle one is always dead centre. Both sides reserve
   --collection-card-side, which must stay at least as wide as the buttons at their widest
   ("Hide settings" + "Open", ~196px measured) — narrower and the right column grows past the
   left, and the title drifts left again. A long title wraps inside the middle column and never
   runs under the buttons. Below 720px the head stacks instead (see the media query). */
.collection-card-head {
    --collection-card-side: 200px;
    display: grid;
    grid-template-columns: minmax(var(--collection-card-side), 1fr) minmax(0, auto) minmax(var(--collection-card-side), 1fr);
    align-items: start;
    gap: 15px;
}

.collection-card-titlewrap {
    grid-column: 2;
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
}

.collection-card-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(36, 54, 70);
    text-decoration: none;
}

.collection-card-title:hover {
    text-decoration: underline;
}

.collection-card-meta {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

.collection-card-desc {
    margin: 12px 0 0 0;
    color: #333;
    line-height: 1.5;
}

.collection-card-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- settings panel ---------------------------------------------------- */

.collection-settings {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #f0f0f0;
}

.collection-settings-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 25px 0 10px 0;
}

.collection-settings-heading:first-child {
    margin-top: 0;
}

/* MT_15787 (Alex, 2026-09-27): label and select sit TOGETHER in the middle, not pushed to the
   two edges of the card. */
.collection-field-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.collection-field-row label {
    color: rgb(36, 54, 70);
    font-weight: 600;
    font-size: 14px;
}

.collection-input,
.collection-textarea,
.collection-select {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    background-color: #fff;
}

.collection-input,
.collection-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.collection-textarea {
    resize: vertical;
    line-height: 1.5;
}

.collection-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.collection-warning {
    font-size: 13px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 12px 0 0 0;
}

/* MT_15787 (Alex, 2026-09-27): every box in the settings panel centres its text — the name,
   the description, both share links and the invite address — under the centred headings. */
.collection-settings .collection-input,
.collection-settings .collection-textarea,
.collection-settings .collection-share-input {
    text-align: center;
}

/* --- share links ------------------------------------------------------- */

.collection-share-link {
    margin-top: 15px;
}

.collection-share-label {
    font-size: 13px;
    font-weight: 600;
    color: rgb(36, 54, 70);
    margin-bottom: 5px;
}

/* A token exists from the moment the collection does; the SETTING is what turns it on
   (specs/collections.md §3 — minting is not granting). An inert link is shown dimmed rather
   than hidden, so nobody resets a link they never enabled. */
.collection-share-link.is-off .collection-share-input {
    color: #999;
    background-color: #f5f5f5;
}

/* Its own line under the label, so "View link" reads as the heading and the note as its state.
   🛑 The [hidden] rule is load-bearing: `display: block` beats the browser's own [hidden] style,
   and without it the note would show on a LIVE link too. */
.collection-share-off {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-style: italic;
    color: #b06a00;
}

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

.collection-share-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.collection-share-input {
    flex: 1;
    min-width: 240px;
    font-family: monospace;
    font-size: 12px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

/* --- editors ----------------------------------------------------------- */

.collection-editor-list {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}

.collection-editor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 14px;
}

.collection-editor-empty {
    color: #888;
    font-size: 13px;
    font-style: italic;
    padding: 4px 0;
}

.collection-editor-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.collection-editor-form .collection-input {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

/* --- the meets inside a collection ------------------------------------- */

.collection-addhint {
    background-color: #e8f4fd;
    border: 1px solid #b6dcf7;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #245670;
}

.collection-meet {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* MT_15787 (Alex, 2026-09-27): each meet row is centred like the collection cards (MT_15789's
   three-column trick, above): name and date in the dead-centre column, the editor's ↑ ↓ Remove
   right-aligned in the third, the first left empty. --collection-meet-side must stay at least as
   wide as those three buttons (~170px measured), or the title drifts left. Below 600px the head
   stacks (media query at the foot). */
.collection-meet-head {
    --collection-meet-side: 180px;
    display: grid;
    grid-template-columns: minmax(var(--collection-meet-side), 1fr) minmax(0, auto) minmax(var(--collection-meet-side), 1fr);
    align-items: start;
    gap: 15px;
}

.collection-meet-titlewrap {
    grid-column: 2;
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
}

.collection-meet-title {
    font-size: 16px;
    font-weight: 600;
    color: #2196F3;
    text-decoration: none;
}

.collection-meet-title:hover {
    text-decoration: underline;
}

.collection-meet-meta {
    font-size: 13px;
    color: #666;
    margin-top: 3px;
}

.collection-pending {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    color: #8a6d3b;
    font-size: 11px;
}

.collection-meet-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* The note, read or edited, is centred with the row. */
.collection-note-read,
.collection-note-editor .collection-textarea {
    text-align: center;
}

.collection-note-editor {
    margin-top: 12px;
}

.collection-note-editor .collection-textarea {
    margin-bottom: 5px;
}

.collection-note-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.collection-note-count {
    font-size: 12px;
    color: #888;
}

.collection-note-count.is-full {
    color: #dc3545;
    font-weight: 600;
}

.collection-note-read {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    background-color: #f9f9f9;
    border-left: 3px solid #e0e0e0;
    border-radius: 0 5px 5px 0;
    color: #333;
    line-height: 1.5;
    font-size: 14px;
}

/* --- buttons ----------------------------------------------------------- */

.collection-btn {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, color 0.2s;
}

.collection-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.collection-btn-primary {
    background-color: #2196F3;
    color: #ffffff;
}

.collection-btn-primary:hover {
    background-color: #1976D2;
}

.collection-btn-quiet {
    background-color: #ffffff;
    border-color: #ccc;
    color: rgb(36, 54, 70);
}

.collection-btn-quiet:hover:not(:disabled) {
    background-color: #f0f0f0;
}

.collection-btn-move {
    padding: 6px 10px;
    line-height: 1;
}

.collection-btn-danger {
    background-color: #dc3545;
    color: #ffffff;
}

.collection-btn-danger:hover {
    background-color: #c82333;
}

.collection-btn-danger-quiet {
    background-color: #ffffff;
    border-color: #f0b8bd;
    color: #dc3545;
    padding: 6px 12px;
    font-size: 13px;
}

.collection-btn-danger-quiet:hover {
    background-color: #fdf0f1;
}

/* --- empty state and toast --------------------------------------------- */

.collection-empty {
    text-align: center;
    padding: 60px 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    color: #666;
}

.collection-empty h3 {
    margin: 0 0 10px 0;
    color: rgb(36, 54, 70);
}

.collection-empty a {
    color: #2196F3;
}

.collection-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    background-color: rgb(36, 54, 70);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 25px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
}

.collection-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.collection-toast.is-error {
    background-color: #b02a37;
}

/* --- the add-to-collection picker, on the DIRECTORY pages ----------------
 *
 * This block styles the one surface in this file that does NOT appear on collections.php or
 * collection.php: the picker that index.php's result rows and meetDetails.php open. Those two
 * pages load this stylesheet for it.
 *
 * ⚠ `.btn-collection-add` is the injected Save button and is the ONLY selector here that lands
 * inside the directory's own meet markup — the expanded panel's `.meet-detail-actions`.
 * 🛑 Since MT_15750 (2026-09-22) its LOOK is NOT set here: it also carries `.meet-action-btn`,
 * the one shared panel-button style in meets_css.css, so Open · Email · Save · Edit · Delete are
 * identical. Style that class, never this one — a size or colour set here is the drift Alex
 * asked to remove. (`.meet-detail-collection-btn` is a hook only and has no rule.)
 */

.btn-collection-add {
    white-space: nowrap;
}

/* meetDetails.php's header action. It carries `.btn-action` for the shared metrics and gets
 * its colour here rather than in meetDetails_css.css — the colour belongs with the feature,
 * and this stylesheet loads AFTER that one on the page, so equal specificity resolves here. */
.btn-collection-save {
    background: rgb(36, 54, 70);
    color: white;
}

.btn-collection-save:hover {
    background: #1a2836;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(36, 54, 70, 0.3);
}

.collection-picker-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10000;
}

/* `hidden` on a flex container loses to `display: flex` without this. */
.collection-picker-backdrop[hidden] {
    display: none;
}

.collection-picker {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

.collection-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.collection-picker-head h3 {
    margin: 0;
    color: rgb(36, 54, 70);
    font-size: 18px;
}

.collection-picker-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}

.collection-picker-close:hover {
    color: rgb(36, 54, 70);
}

.collection-picker-meet {
    margin: 0 0 14px 0;
    color: #666;
    font-size: 14px;
    font-style: italic;
    word-break: break-word;
}

.collection-picker-note {
    margin: 0 0 14px 0;
    color: #666;
    font-size: 14px;
}

.collection-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.collection-picker-choice {
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
}

.collection-picker-choice:hover {
    background-color: #f0f7fd;
    border-color: #2196F3;
}

.collection-picker-choice-title {
    color: rgb(36, 54, 70);
    font-weight: 600;
    word-break: break-word;
}

.collection-picker-choice-count {
    color: #888;
    font-size: 12px;
    white-space: nowrap;
}

.collection-picker-new {
    display: flex;
    gap: 8px;
    border-top: 1px solid #eee;
    padding-top: 14px;
}

.collection-picker-new .collection-input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* MT_15789: a card head stacks — title centred, buttons centred under it — once the two
   reserved side columns would squeeze the title below ~200px. */
@media (max-width: 720px) {
    .collection-card-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .collection-card-titlewrap,
    .collection-card-actions {
        grid-column: 1;
    }

    .collection-card-actions {
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .collection-meet-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .collection-meet-titlewrap,
    .collection-meet-actions {
        grid-column: 1;
        justify-self: center;
    }

    .collection-picker-new {
        flex-direction: column;
    }
}