/* ============================================
   List / library view — overlay, rows, checkboxes, bulk bar, export modal
   Loaded via <link> in index.html.
   Depends on tokens.css custom properties.
   ============================================ */

/* ---- Dark-theme open list-view shadow ---- */
/* Relocated from tokens.css in slice #72. Higher specificity than the base
   .list-view.open rule, so it wins regardless of <link> order. */
[data-theme="dark"] .list-view.open {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}

/* ---- List View (Library) — slides in as overlay ---- */
.list-view {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* Never exceed the viewport: 420px on desktop, full width on phones so the
     Select pill, type toggle, and row text don't get clipped off-screen (#52). */
  width: min(var(--library-width), 100vw);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  z-index: var(--z-panel);
  border-right: 1px solid var(--color-border);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}

.list-view[hidden] { display: none; }

.list-view.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06);
}

.list-header {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding: 52px var(--spacing-16) var(--spacing-16);
}

.list-back {
  flex-shrink: 0;
  font-size: 18px;
}

.list-filter-btn {
  flex-shrink: 0;
}

.list-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.list-type-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

.type-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-geist-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-base);
}

.type-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.type-btn:hover {
  color: var(--color-text-primary);
}

.type-btn.active {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
}

/* On phones the five tabs are wider than the viewport. Let the segmented
   control scroll horizontally rather than clip "Archived" off-screen (#52).
   Tabs keep their natural width (flex: 0 0 auto) so labels aren't squished;
   the row scrolls instead. Overrides the .type-btn { flex: 1 } in map.css. */
@media (max-width: 767px) {
  .list-type-toggle {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  .list-type-toggle::-webkit-scrollbar { display: none; }
  .type-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
  }
  /* Clear the Dynamic Island / notch (#52). Lives here, not map.css: list.css
     loads later, so a map.css mobile rule would be overridden by the base
     `.list-header`/`.list-select-toggle` rules above. */
  .list-header {
    padding: calc(60px + env(safe-area-inset-top, 0px)) var(--spacing-12) var(--spacing-12);
  }
  .list-select-toggle {
    top: calc(var(--spacing-16) + env(safe-area-inset-top, 0px));
  }
  /* Full-bleed on phones: the base `min(--library-width, 100vw)` resolves to
     420px, which is narrower than the viewport on large phones (e.g. 440pt on
     iPhone 16 Pro Max), leaving a strip of map peeking on the right. Span the
     whole width so the library is a true overlay (#86 follow-up). */
  .list-view {
    width: 100vw;
  }
}

.list-select-toggle {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-16);
  padding: 5px 14px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-geist-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  cursor: pointer;
  transition: all var(--duration-base);
}

.list-select-toggle:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.list-select-toggle.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.list-search {
  margin-bottom: var(--spacing-8);
}

.list-search input {
  width: 100%;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface-alt);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  transition: border-color var(--duration-base);
}

.list-search input:focus {
  outline: none;
  border-color: var(--color-border-hover);
}

.list-search input::placeholder {
  color: var(--color-text-faint);
}


/* Archived list row muted style */
.list-row.archived {
  opacity: 0.5;
}

.list-row.archived .list-row-name::after {
  content: 'ARCHIVED';
  font-family: var(--font-geist-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-left: 8px;
  vertical-align: middle;
}

.list-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.list-filter-bar:empty { display: none; }

.list-bulk-bar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-10) 0 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-8);
}

.list-bulk-bar[hidden] { display: none; }

.bulk-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-all-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.selection-count {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  font-family: var(--font-geist-mono);
  white-space: nowrap;
}

.bulk-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0 var(--spacing-4);
}

.bulk-color-picker[hidden] { display: none; }

.app-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--spacing-8) var(--spacing-16);
  font-size: var(--text-caption);
  font-family: var(--font-geist-mono);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

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

/* ---- Custom checkboxes ---- */
input[type="checkbox"].list-row-checkbox,
#list-select-all {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border-hover);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

input[type="checkbox"].list-row-checkbox:hover,
#list-select-all:hover {
  border-color: var(--color-text-muted);
}

input[type="checkbox"].list-row-checkbox:checked,
#list-select-all:checked {
  background: #2563eb;
  border-color: #2563eb;
}

input[type="checkbox"].list-row-checkbox:checked::before,
#list-select-all:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
}

/* ---- Export Modal ---- */
.export-format-bar {
  display: flex;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-12);
}

.export-format-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
}

.export-format-option input {
  accent-color: var(--color-cta-bg);
}

.export-output {
  width: 100%;
  min-height: 280px;
  max-height: 400px;
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-canvas);
  font-family: var(--font-geist-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-primary);
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}

.export-output:focus {
  outline: none;
  border-color: var(--color-border-hover);
}

.export-copy-btn {
  margin-top: var(--spacing-12);
  width: 100%;
}

.list-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4) 0 var(--spacing-16);
}

/* ---- List Rows ---- */
.list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-20);
  margin: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-base), background var(--duration-base), box-shadow var(--duration-base);
}

/* Staggered entry animation plays only on a fresh data load (.row-enter added
   by renderList), not on every search/filter re-render — replaying it on each
   keystroke read as "constant refreshing" (#52). */
.list-row.row-enter {
  animation: list-row-enter var(--duration-base) var(--ease-out) backwards;
  animation-delay: calc(var(--row-index, 0) * 30ms);
}

.list-row:first-child {
  margin-top: var(--spacing-12);
}

.list-row:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-alt);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.list-row:active { transform: scale(0.985); }

.list-row.selected {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.list-row-checkbox {
  align-self: center;
  flex-shrink: 0;
}

.list-row-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-input);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-row-thumb .type-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
}

.list-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.list-row-name {
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-text-heading);
  line-height: 1.2;
}

.list-row-location {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-geist-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.list-row-type {
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: 1px;
}

.list-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.list-row-tags .tag {
  font-size: 10px;
  font-family: var(--font-geist-mono);
  padding: 2px 7px;
  border-radius: 3px;
  cursor: default;
}

.list-row-desc {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-row-notes {
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--spacing-8);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-row-meta {
  flex-shrink: 0;
  text-align: right;
  align-self: flex-end;
}

.list-row-date {
  font-size: 11px;
  color: var(--color-text-faint);
  font-family: var(--font-geist-mono);
  white-space: nowrap;
}

.list-row-type-badge {
  font-family: var(--font-geist-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-4);
  display: inline-block;
}

.list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-faint);
  font-size: var(--text-body);
}