// Content Types page — post type selection for indexing
// Uses UI components: Input, SelectFilter, Button
// Custom checkbox rows matching Figma design

.page {
  display: flex;
  flex-direction: column;
  gap: map.get($spacing-scale, 'lg');
  max-width: 1200px;
  padding-bottom: map.get($spacing-scale, 'xl');
}

// ── Header ─────────────────────────────────────────
.header {
  display: flex;
  align-items: flex-start;
  gap: map.get($spacing-scale, 'sm');
}

.headerText {
  flex: 1;
  min-width: 0;
}

// Nested for (0,2,0) specificity to beat WP admin `.wrap h1` at (0,1,1)
.header .title {
  @include body-large-medium;
  line-height: 1;
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.subtitle {
  @include body-small-regular;
  color: var(--color-text-secondary);
  margin: map.get($spacing-scale, 's-1') 0 0;
}

.headerActions {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'sm');
  flex-shrink: 0;
}

.searchInput {
  flex: 1;
  min-width: 140px;
}

// ── List Header ───────────────────────────────────
.listHeader {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'md');
  padding: map.get($spacing-scale, 'sm') map.get($spacing-scale, 'lg');
  background-color: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-grey-soft);
}

.listHeaderLabel {
  @include caption-regular;
  flex: 1;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.listHeaderCount {
  @include caption-regular;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

// ── List ──────────────────────────────────────────
.listContainer {
  background-color: var(--color-surface-primary);
  border: 1px solid var(--color-grey-soft);
  border-radius: map.get($radius, 'lg');
  overflow: hidden;
}

.list {
  max-height: 660px;
  overflow-y: auto;
}

// ── Checkbox Row ──────────────────────────────────
.row {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'md');
  padding: 0 map.get($spacing-scale, 'lg');
  min-height: 60px;
  background-color: var(--color-surface-primary);
  border-bottom: 1px solid var(--color-grey-soft);
  cursor: pointer;
  user-select: none;

  @include transition(background-color);

  &:hover {
    background-color: var(--color-grey-light);
  }

  &:last-child {
    border-bottom: none;
  }
}

// Custom checkbox
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-grey-medium);
  border-radius: 4px;
  background: var(--color-surface-primary);
  cursor: pointer;
  position: relative;

  @include transition(all);

  &:checked {
    background: var(--color-primary-base);
    border-color: var(--color-primary-base);
  }

  &:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
  }
}

.rowLabel {
  @include body-small-regular;
  flex: 1;
  color: var(--color-text-primary);
}

.rowCount {
  @include body-small-regular;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

// ── Scroll Indicator ──────────────────────────────
.scrollIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: map.get($spacing-scale, 's-1');
  padding: map.get($spacing-scale, 'sm');
  border-top: 1px solid var(--color-grey-soft);
  cursor: pointer;
  user-select: none;

  @include caption-regular;
  color: var(--color-text-tertiary);
  @include transition(color);

  &:hover {
    color: var(--color-text-secondary);
  }

  svg {
    width: 14px;
    height: 14px;
  }
}

// ── Disabled Row ──────────────────────────────────
.rowDisabled {
  cursor: not-allowed;
  opacity: 0.45;

  &:hover {
    background-color: var(--color-surface-primary);
  }

  .checkbox {
    cursor: not-allowed;
  }
}

// ── Skeleton Loader ───────────────────────────────
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeletonRow {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'md');
  padding: 0 map.get($spacing-scale, 'lg');
  min-height: 60px;
  border-bottom: 1px solid var(--color-grey-soft);

  &:last-child {
    border-bottom: none;
  }
}

.skeletonCheckbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-grey-soft) 25%, var(--color-grey-light, #f0f0f0) 50%, var(--color-grey-soft) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeletonCell {
  height: 12px;
  border-radius: 6px;
  flex: 1;
  background: linear-gradient(90deg, var(--color-grey-soft) 25%, var(--color-grey-light, #f0f0f0) 50%, var(--color-grey-soft) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

// ── States ────────────────────────────────────────
.loadingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: map.get($spacing-scale, 'md');
  padding: 80px 0;
  color: var(--color-text-tertiary);

  @include body-small-regular;
}

.emptyRow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px map.get($spacing-scale, 'md');
  color: var(--color-text-tertiary);

  @include body-small-regular;
}

// ── Responsive ────────────────────────────────────
@media (max-width: $breakpoint-content) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: map.get($spacing-scale, 'md');
  }

  .headerActions {
    flex-wrap: wrap;
  }

  .searchInput {
    width: 100%;
    flex: 1;
  }
}