/*
  css/collection-view.css
  Shared chrome (header/search/list container) plus three distinct column
  layouts — one per collection, since Books Read/To Be Read/My Library
  genuinely look different (Stan: match each view's spec over forcing
  visual uniformity). Column widths for each layout are shared between the
  header row and list rows via the matching *-columns class.
*/

.collection-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.collection-view-header h2 {
    margin: 0;
}

.collection-add-btn {
    margin-right: 0;
}

.collection-list-header {
    padding: 10px 12px;
    background: var(--color-table-header-bg);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 0.85em;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
    display: grid;
    gap: 12px;
}

.view-scroll-locked.active > .collection-view-header,
.view-scroll-locked.active > .quick-search,
.view-scroll-locked.active > .collection-list-header {
    flex-shrink: 0;
}

/* TBR prototype: CollectionView's shell now renders one level deeper
   (#queuedView > .tbr-layout > .tbr-list-col), so the direct-child
   selector above doesn't reach it — same rule, re-scoped. See
   queued-discovery.css for .tbr-layout/.tbr-list-col's own flex setup. */
.tbr-list-col > .collection-view-header,
.tbr-list-col > .quick-search,
.tbr-list-col > .collection-list-header {
    flex-shrink: 0;
}

.collection-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.collection-list-row {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.collection-list-row:hover {
    background: var(--color-table-row-hover);
}

/* Grid items default to min-width:auto (their content's min-content size),
   which both prevents text-overflow:ellipsis from working and is what let
   a too-narrow track force this row into wrapping. Applies to every direct
   child of a row or header, regardless of column count, so this can't
   recur even if a future column count/template mismatch happens again. */
.collection-list-row > *,
.collection-list-header > * {
    min-width: 0;
}

.collection-list-row .col-title,
.collection-list-row .col-author,
.collection-list-row .col-extra,
.collection-list-row .col-tags,
.collection-list-row .col-rating,
.collection-list-row .col-status,
.collection-list-row .col-source,
.collection-list-row .stacked-title,
.collection-list-row .stacked-author,
.collection-list-row .stacked-source {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-list-row .col-title {
    font-weight: 500;
    color: var(--text-color);
}

.collection-list-row .col-author,
.collection-list-row .col-extra,
.collection-list-row .col-tags,
.collection-list-row .col-rating,
.collection-list-row .col-status,
.collection-list-row .col-source {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.match-count {
    margin-left: 6px;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ── Advanced filter panel (issue #49) ──────────────────────────────────── */

.filter-icon {
    cursor: pointer;
    margin-left: 6px;
}

.filter-panel {
    background: var(--color-table-header-bg);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.filter-row .filter-field,
.filter-row .filter-operator {
    min-width: 140px;
}

.filter-value {
    display: flex;
    align-items: center;
}

.filter-value .filter-value-input {
    min-width: 140px;
}

.filter-value .date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-value .date-range .filter-value-input {
    min-width: 110px;
}

.filter-panel-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

.collection-list-empty {
    padding: 30px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Books Read (consumed): Finished | Title | Author | Tags | Rating ──── */

.consumed-columns {
    grid-template-columns: 110px 3.5fr 1.5fr 140px;
}

/* ── To Be Read (queued): Order | stacked Title/Author/Source | Finished-btn ── */
/* Tags column dropped for the TBR prototype layout (Stan's call — left
   panel stays lean now that a synopsis card lives alongside it). */

.queued-columns {
    grid-template-columns: 80px 1fr 220px;
}

.col-stacked {
    min-width: 0;
}

.col-stacked .stacked-title {
    font-weight: 500;
    color: var(--text-color);
}

.col-stacked .stacked-author,
.col-stacked .stacked-source {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.queued-finished-btn {
    margin-right: 0;
    justify-self: end;
    white-space: nowrap;
}

.queued-reading-btn {
    margin-right: 0;
    white-space: nowrap;
}

/* ── Currently Reading (queued) ─────────────────────────────────────────── */

.collection-list-row.currently-reading {
    background: var(--color-checked-out-bg, var(--color-table-row-hover));
    border-left: 4px solid var(--primary-color);
}

.currently-reading-badge {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 4px;
}

/* ── My Library (owned): Title | Author | Tags | Status | Actions ──────── */

.owned-columns {
    grid-template-columns: 3.5fr 1.5fr 130px 170px;
}

.col-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.col-actions .btn {
    margin-right: 0;
    padding: 6px 10px;
    font-size: 0.85em;
}

/* ── Delete button in modal action rows ─────────────────────────────────── */

#cbrDeleteBtn,
#tbrDeleteBtn,
#mlDeleteBtn {
    margin-right: 0;
}