/* Library screen: header/toolbar, three view modes, filter panel, bulk bar. */

.library-header { margin-bottom: var(--space-4); }
.library-title-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.library-title-row h1 { margin: 0; }
.library-count { color: var(--text-muted); font-size: var(--fs-sm); }

.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.library-toolbar .search-input-wrap { flex: 1 1 220px; min-width: 0; }
.library-toolbar .toolbar-spacer { flex: 1 1 auto; }

.bulk-select-page {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap-min);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}
.bulk-select-page input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}

.filter-btn { position: relative; }
.filter-btn .filter-count {
  position: absolute; top: -6px; inset-inline-end: -6px;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-size: 0.65rem; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.view-switcher { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.view-switcher button {
  background: var(--surface); border: none; padding: 0.5rem 0.65rem; cursor: pointer; color: var(--text-muted);
  min-height: var(--tap-min); min-width: var(--tap-min); border-inline-end: 1px solid var(--border-strong);
}
.view-switcher button:last-child { border-inline-end: none; }
.view-switcher button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }

.view-tabs { display: flex; gap: var(--space-2); overflow-x: auto; margin-bottom: var(--space-3); padding-bottom: 2px; }
.view-tabs a {
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; min-height: var(--tap-min); display: inline-flex; align-items: center;
}
.view-tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ---------- Card view ---------- */
/* `minmax(0, 1fr)`, not `1fr`.
 *
 * A bare `1fr` track is `minmax(auto, 1fr)`, and that `auto` minimum is the
 * grid item's MIN-CONTENT width. So a card holding one thing that cannot
 * shrink -- a select with a long option, a wrapping actions row -- pushes the
 * track wider than the grid box, the card overflows the viewport, and
 * `body { overflow-x: hidden }` then clips the right-hand side instead of
 * showing it. That is exactly what happened on the mobile Archive screen: the
 * track resolved to 400px inside a 360px grid, the page measured 415 CSS px
 * wide, and the card's controls were cut off.
 *
 * `minmax(0, 1fr)` gives the track a real zero minimum, so it can never grow
 * past its share of the container and the content inside wraps or ellipses as
 * it was written to. */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

/* A record is always one horizontal row. The media ratio changes with the
   viewport, while the card geometry stays stable whether an image exists or
   not. This prevents metadata length and failed remote images from changing
   the grid rhythm. */
.item-card {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 66%);
  height: 168px;
  min-width: 0;
  max-width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.item-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.item-card .seq {
  position: absolute;
  inset-inline-start: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  min-width: 24px;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.item-card .select-box {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: var(--space-2);
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}
.item-card .select-box input { margin: 0; }

.item-media {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: var(--space-2);
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  text-decoration: none;
}
[dir="rtl"] .item-media { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.item-media::before,
.item-media::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(47, 111, 237, 0.09);
  border-radius: 50%;
  pointer-events: none;
}
.item-media::before { width: 92px; height: 92px; inset-inline-end: -40px; top: -30px; }
.item-media::after { width: 64px; height: 64px; inset-inline-start: -30px; bottom: -24px; }
.item-media img.thumb {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: calc(var(--radius-md) - var(--space-2));
}
.item-media-fallback {
  position: absolute;
  inset: var(--space-2);
  z-index: 1;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - var(--space-2));
  background: linear-gradient(145deg, #eef5ff, #f7f9fd);
}
.item-media.has-image .item-media-fallback { display: none; }
.item-media.has-image.image-failed .item-media-fallback { display: flex; }
.item-media-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.item-media-fallback strong { width: 100%; font-size: var(--fs-xs); font-weight: 650; color: var(--text); }
.item-media-fallback small { font-size: 0.68rem; color: var(--text-faint); }
.item-media-note {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-tint), #f8faff);
}
.item-media-note strong { font-size: var(--fs-xs); }

.item-card .item-body {
  min-width: 0;
  height: 100%;
  padding: var(--space-3);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 0.35rem;
}
.item-card-head { display: flex; align-items: center; gap: var(--space-1); min-width: 0; min-height: 32px; }
.item-source { flex: 1; min-width: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.item-toolbar { display: inline-flex; align-items: center; flex: 0 0 auto; }
.item-toolbar .btn-icon,
.row-actions .btn-icon,
.table-action-toolbar .btn-icon {
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0.42rem;
  color: var(--text-muted);
}
.item-toolbar .btn-icon:hover,
.row-actions .btn-icon:hover,
.table-action-toolbar .btn-icon:hover { color: var(--accent); background: var(--accent-tint); }
.fav-star.is-favorite { color: var(--warning); }
.item-content-link { min-width: 0; color: inherit; text-decoration: none; }
.item-content-link:hover .title,
.item-open-link:hover { color: var(--accent); }
.item-card .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 650;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--text);
}
.item-card .description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.42;
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
}
.item-card-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  white-space: nowrap;
}
.item-card-meta .badge { flex: 0 0 auto; }
.item-card-footer {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

@media (min-width: 640px) {
  .item-card { grid-template-columns: minmax(0, 38%) minmax(0, 62%); height: 180px; }
  .item-card .description { -webkit-line-clamp: 3; }
}
@media (min-width: 1180px) {
  .item-card { grid-template-columns: minmax(0, 42%) minmax(0, 58%); height: 194px; }
}
.collection-badge { display: inline-flex; align-items: center; gap: 0.2rem; }
.collection-badge button { font-size: 0.9rem; line-height: 1; padding: 0 0.1rem; min-height: auto; }
.item-card select.inline-select { font-size: var(--fs-sm); padding: 0.25rem 0.4rem; min-height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); max-width: 12rem; }

/* ---------- Compact list view ---------- */
.library-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.library-list-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
  min-height: 82px;
}
.library-list-row:last-child { border-bottom: none; }
.library-list-row .seq { color: var(--text-faint); font-size: var(--fs-xs); width: 1.5rem; text-align: end; flex-shrink: 0; }
.library-list-row .title-col { flex: 1; min-width: 0; }
.library-list-row .title-col .title { font-weight: 650; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-list-row .title-col .meta { color: var(--text-muted); font-size: var(--fs-xs); display: flex; align-items: center; gap: 0.3rem; overflow: hidden; white-space: nowrap; }
.list-summary { margin: 0.15rem 0; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-media {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: linear-gradient(145deg, #eef5ff, #f7f9fd);
}
.list-media img.thumb { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.list-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.list-media.has-image .list-media-fallback { display: none; }
.list-media.has-image.image-failed .list-media-fallback { display: grid; }
.list-media.item-media-note { flex-direction: row; }
.library-list-row .row-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ---------- "More actions" menu (list + table rows) ---------- */
.row-menu { position: relative; display: inline-flex; }
.row-menu-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.3rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); min-width: 220px; padding: var(--space-2); z-index: var(--z-drawer);
}
.row-menu-panel.item-action-panel { width: min(340px, 88vw); max-height: min(70vh, 620px); overflow-y: auto; }
.row-menu-panel[hidden] { display: none; }
.row-menu-panel .menu-item {
  display: block; width: 100%; text-align: start; background: none; border: none;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: var(--fs-sm);
  color: var(--text); cursor: pointer; min-height: var(--tap-min);
}
.row-menu-panel .menu-item:hover { background: var(--surface-2); }
.row-menu-panel .menu-item.danger { color: var(--danger); }
.row-menu-panel form { margin: 0; }
.row-menu-panel select.inline-select { width: 100%; margin-bottom: var(--space-2); }
.item-action-section + .item-action-section { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2); }
.item-action-panel .stacked { gap: var(--space-2); margin-bottom: var(--space-2); }
.item-action-panel .input,
.item-action-panel .textarea,
.item-action-panel .inline-select { font-size: var(--fs-sm); }
.item-action-panel .tag-remove-row { margin: 0 0 var(--space-2); }
.item-action-panel .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.btn-icon.fav-star-btn { color: var(--text-faint); }
.btn-icon.fav-star-btn.is-favorite { color: var(--warning); }

/* ---------- Table view (desktop only) ---------- */
table.data-table td.col-fav { text-align: center; width: 2.5rem; }
table.data-table td.col-actions { text-align: end; white-space: nowrap; }
.table-action-toolbar { display: inline-flex; align-items: center; justify-content: flex-end; }

@media (max-width: 559px) {
  .library-list-row { gap: var(--space-2); padding-inline: var(--space-2); }
  .library-list-row .seq { display: none; }
  .list-media { width: 54px; height: 54px; flex-basis: 54px; }
  .library-list-row .row-actions { gap: 0; }
  .library-list-row .title-col .meta .badge:nth-of-type(n+3) { display: none; }
}

/* Table view is a desktop-only mode -- the switcher button that selects it
   is hidden below the breakpoint (plan: "no desktop tables forced onto
   mobile"), and JS also falls back to card view if a stored preference of
   "table" is read on a narrow viewport. */
[data-set-view="table"][data-desktop-only-view] { display: none; }
@media (min-width: 768px) {
  [data-set-view="table"][data-desktop-only-view] { display: inline-flex; }
}

/* One view visible at a time; JS toggles [hidden] on [data-view-panel]. */
[data-view-panel][hidden] { display: none; }

/* ---------- Filter sheet contents ---------- */
.filter-section { margin-bottom: var(--space-4); }
.filter-section h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 0 0 var(--space-2); }
.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-option-label {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); cursor: pointer; min-height: var(--tap-min);
}
.filter-option-label input { margin: 0; }
.filter-option-label:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.filter-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); position: sticky; bottom: 0; background: var(--surface); padding-top: var(--space-3); }
.filter-actions .btn { flex: 1; }

.date-range-custom { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.date-range-custom .field { flex: 1; margin-bottom: 0; }

/* ---------- Bulk selection bar ---------- */
.bulk-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--text);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .count { font-weight: 600; white-space: nowrap; }
.bulk-bar .btn-secondary { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.bulk-bar .btn-secondary:hover { background: rgba(255,255,255,0.22); }
.bulk-bar .clear-selection { margin-inline-start: auto; color: #fff; background: none; border: none; cursor: pointer; font-size: var(--fs-sm); min-height: var(--tap-min); }

@media (max-width: 767px) {
  .bulk-bar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
}

.quick-save-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.quick-save-form .field { margin-bottom: 0; flex: 1 1 220px; }