/* List views (COMMAND-545, public/list-views): the switcher above an index page's search row and its icon tools in it (CHORE-235) and the New/Edit view dialog.
   Built without a design: both carry the POC marker (poc-ui, app.css). Loaded by index.html after app.css, so it uses the
   app's colours (--surface, --line, --accent …). The menu is a small dropdown under the button: as wide as a phone allows
   on a phone, a steady width on a desktop; index.js moves it left where it would run off the window (COMMAND-635). */

.record-views { position: relative; display: flex; align-items: center; }
.lv-views { position: relative; }
.lv-views-btn { display: inline-flex; align-items: center; gap: 6px; max-width: min(60vw, 360px); }
.lv-views-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.lv-views-chevron { display: inline-flex; }
.lv-views-chevron svg { width: 16px; height: 16px; }
.lv-views-btn[aria-expanded='true'] .lv-views-chevron svg { transform: rotate(180deg); }

.lv-views-menu {
  position: absolute; z-index: 15; top: calc(100% + 6px); left: 0;
  width: min(320px, calc(100vw - 32px));
  max-height: min(70vh, 480px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
}
@media (min-width: 900px) { .lv-views-menu { width: 340px; } }
.lv-views-list { list-style: none; margin: 0; padding: 0; }
.lv-views-item { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.lv-views-item.on { background: var(--surface-2); }
.lv-views-pick {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-views-item.on .lv-views-pick { font-weight: 700; }
.lv-views-pin {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.lv-views-pin svg { width: 18px; height: 18px; }
.lv-views-pin.on { color: var(--accent); }
.lv-views-pin.on svg path { fill: currentColor; }
.lv-views-pin:disabled { cursor: default; }
.lv-views-pick:hover, .lv-views-pin:not(:disabled):hover { background: var(--surface-2); }

/* CHORE-235: the view's icon tools on the right of the search row (Edit filters, Refresh, Clone, New view, Delete);
   Refresh turns while the page reads its rows again. */
.lv-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lv-tools-refresh[aria-busy='true'] svg { animation: lv-spin 0.8s linear infinite; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lv-tools-refresh[aria-busy='true'] svg { animation: none; opacity: 0.5; } }

/* The New/Edit view dialog: on the shared popup shell (modal.js), over a dimmed page; at the bottom on a phone. */
.lv-editor-back {
  position: fixed; inset: 0; z-index: 21;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .lv-editor-back { align-items: center; } }
.lv-editor { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.lv-editor h2 { margin: 0; font-size: 1.05rem; }
.lv-editor-label { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.lv-editor-heading { margin: 14px 0 6px; font-size: 0.95rem; }
.lv-editor-filters { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-editor-filter { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.lv-editor-filter .lv-editor-value { grid-column: 1 / 3; }
.lv-editor-filter .lv-editor-remove { grid-column: 3; grid-row: 1; }
@media (min-width: 640px) {
  .lv-editor-filter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .lv-editor-filter .lv-editor-value { grid-column: auto; }
  .lv-editor-filter .lv-editor-remove { grid-column: auto; grid-row: auto; }
}
.lv-editor-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.lv-editor-sort .lv-editor-label { flex: 1 1 200px; margin: 0; }

/* BUG-817: the pager under an index page's list (one page of its view at a time). */
.lv-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 4px; }
.lv-pager-btn { min-width: 36px; font-size: 18px; line-height: 1; }