// =============================================================================
// Page Editor
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

// =============================================================================
// Layout — main scrollable content area
// =============================================================================

.page-editor-layout {
  position: fixed;
  top: calc(#{$spacing-header} + #{$spacing-subheader} + 8px);
  bottom: 0;
  overflow-y: auto;
  @include custom-scrollbar;
}

.page-editor-layout--animated {
  transition: left $transition-normal ease, right $transition-normal ease;
}

// =============================================================================
// Drop indicator for catalog D&D
// =============================================================================

.page-editor-drop-indicator {
  margin: 0.5rem 1rem;
  height: 3rem;
  background-color: $primary-50;
  border: 2px dashed $primary-400;
  border-radius: $radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .dark & {
    background-color: rgba($primary-900, 0.2);
  }
}

.page-editor-drop-indicator__text {
  font-size: $font-size-xs;
  color: $primary-500;
  font-weight: $font-weight-medium;
}

// =============================================================================
// Add block button at bottom
// =============================================================================

.page-editor-add-block {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem;
}

.page-editor-add-block__btn {
  width: 100%;
  padding: 0.75rem;
  border: 2px dashed $neutral-300;
  border-radius: $radius-lg;
  font-size: $font-size-sm;
  color: $neutral-500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: none;
  cursor: pointer;
  @include transition-fast(color, border-color);

  &:hover {
    color: $primary-600;
    border-color: $primary-400;
  }

  .dark & {
    border-color: $neutral-600;

    &:hover {
      color: $primary-400;
      border-color: $primary-500;
    }
  }
}

// =============================================================================
// Block Preview Card
// =============================================================================

.block-preview-card {
  position: relative;

  &:hover .block-preview-card__overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

.block-preview-card__overlay {
  position: absolute;
  top: 0.375rem;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: $radius;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  @include transition-fast(opacity);
}

.block-preview-card__overlay--left {
  left: 0.375rem;
  gap: 0.375rem;
  max-width: 60%;
}

.block-preview-card__overlay--right {
  right: 0.375rem;
  gap: 0.25rem;
  padding: 0 0.375rem;
}

// Drag overlay to intercept events over iframes
.block-preview-card__drag-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
}

// Drag handle
.block-preview-card__drag-handle {
  cursor: grab;
  flex-shrink: 0;

  &:active {
    cursor: grabbing;
  }
}

// Block ID badge
.block-preview-card__id {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: $font-mono;
  flex-shrink: 0;
}

// Block name
.block-preview-card__name {
  font-size: 11px;
  font-weight: $font-weight-medium;
  @include truncate;
}

// Block type badge
.block-preview-card__type-badge {
  font-size: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: $radius;
  padding: 0.125rem 0.375rem;
  flex-shrink: 0;
}

// Cache icon
.block-preview-card__cache-icon {
  color: #4ade80;
  flex-shrink: 0;
}

// Status badge
.block-preview-card__status-badge {
  font-size: 10px;
  border-radius: $radius;
  padding: 0.125rem 0.375rem;
  flex-shrink: 0;
  color: #fff;
}

.block-preview-card__status-badge--draft {
  background-color: rgba($warning-500, 0.8);
}

.block-preview-card__status-badge--hidden {
  background-color: rgba($neutral-500, 0.8);
}

// Dirty indicator
.block-preview-card__dirty-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: $radius-full;
  background-color: $warning-400;
  flex-shrink: 0;
}

// Icon buttons in overlay
.block-preview-card__icon-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  @include transition-fast(color);

  &:hover {
    color: #fff;
  }
}

.block-preview-card__icon-btn--delete:hover {
  color: $error-400;
}

.block-preview-card__icon-btn--spinning {
  animation: spin 1s linear infinite;
}

// Mode toggle group
.block-preview-card__mode-group {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: $radius;
  padding: 0.125rem;
  flex-shrink: 0;
}

.block-preview-card__mode-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
  @include transition-fast(color, background-color);
  background: none;
  border: none;
  cursor: pointer;
}

.block-preview-card__mode-btn--active {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.block-preview-card__mode-btn--inactive {
  color: rgba(255, 255, 255, 0.6);

  &:hover {
    color: #fff;
  }
}

// Content area
.block-preview-card__not-published {
  opacity: 0.5;
}

.block-preview-card__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: $neutral-400;
}

.block-preview-card__error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: $neutral-400;
}

.block-preview-card__iframe {
  width: 100%;
  border: 0;
  display: block;
}

// =============================================================================
// Content container — flex layout, direction depends on mode
// =============================================================================

.block-preview-card__content {
  display: flex;
}

.block-preview-card__content--preview-only {
  flex-direction: column;
}

.block-preview-card__content--editor-only {
  flex-direction: column;
}

.block-preview-card__content--horizontal {
  flex-direction: row;
}

.block-preview-card__content--vertical {
  flex-direction: column;
}

// Resizer between preview and editor (horizontal mode)
.block-preview-card__resizer {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background-color: transparent;
  @include transition-fast(background-color);

  &:hover {
    background-color: $primary-500;
  }
}

.block-preview-card__resizer--active {
  background-color: $primary-500;
}

// Preview pane
.block-preview-card__preview {
  min-width: 0;
  overflow: hidden;

  .block-preview-card__content--horizontal & {
    flex: 1;
  }

  .block-preview-card__content--preview-only & {
    flex: 1;
  }
}

// Editor pane
.block-preview-card__editor {
  background-color: #fff;
  overflow-y: auto;

  .dark & {
    background-color: $neutral-800;
  }

  .block-preview-card__content--editor-only & {
    border: 1px solid $neutral-200;
    padding: 1rem;

    .dark & {
      border-color: $neutral-700;
    }
  }

  .block-preview-card__content--horizontal & {
    flex-shrink: 0;
    padding: 0 1rem 1rem;
    max-height: 800px;
  }

  .block-preview-card__content--vertical & {
    padding: 1rem;
    border-top: 1px solid $neutral-200;

    .dark & {
      border-top-color: $neutral-700;
    }
  }
}

// =============================================================================
// Block Catalog Panel
// =============================================================================

.block-catalog {
  height: 100%;
  background-color: #fff;
  border-left: 1px solid $neutral-200;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .dark & {
    background-color: $neutral-800;
    border-left-color: $neutral-700;
  }
}

.block-catalog__header {
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid $neutral-100;

  .dark & {
    background-color: rgba($neutral-800, 0.95);
    border-bottom-color: rgba($neutral-700, 0.5);
  }
}

.block-catalog__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

.block-catalog__title {
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  color: $neutral-900;

  .dark & {
    color: $neutral-50;
  }
}

.block-catalog__header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

// View mode toggle
.block-catalog__view-toggle {
  display: flex;
  align-items: center;
  background-color: $neutral-100;
  border-radius: $radius;
  padding: 0.125rem;

  .dark & {
    background-color: $neutral-700;
  }
}

.block-catalog__view-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
  @include transition-fast(color, background-color);
  background: none;
  border: none;
  cursor: pointer;
}

.block-catalog__view-btn--active {
  background-color: #fff;
  color: $neutral-700;
  box-shadow: $shadow-sm;

  .dark & {
    background-color: $neutral-600;
    color: $neutral-200;
  }
}

.block-catalog__view-btn--inactive {
  color: $neutral-400;

  &:hover {
    color: $neutral-600;
  }

  .dark &:hover {
    color: $neutral-300;
  }
}

// Close button
.block-catalog__close-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $neutral-400;
  background: none;
  border: none;
  cursor: pointer;
  @include transition-fast(color, background-color);

  &:hover {
    color: $neutral-600;
    background-color: $neutral-100;
  }

  .dark &:hover {
    color: $neutral-300;
    background-color: $neutral-700;
  }
}

// Search
.block-catalog__search {
  padding: 0 1rem 0.75rem;
}

.block-catalog__search-wrapper {
  position: relative;
}

.block-catalog__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: $neutral-400;
}

.block-catalog__search-input {
  padding-left: 2.25rem;
  font-size: $font-size-sm;
}

// Body (scrollable)
.block-catalog__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  @include custom-scrollbar;

  > * + * {
    margin-top: 1rem;
  }
}

.block-catalog__empty {
  padding: 2rem 0;
  text-align: center;
  font-size: $font-size-sm;
  color: $neutral-500;
}

// Category
.block-catalog__category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: $font-size-xs;
  font-weight: $font-weight-semibold;
  color: $neutral-500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  cursor: pointer;
  @include transition-fast(color);

  &:hover {
    color: $neutral-700;
  }

  .dark & {
    color: $neutral-400;

    &:hover {
      color: $neutral-300;
    }
  }
}

.block-catalog__category-count {
  color: $neutral-400;
  font-weight: $font-weight-normal;
  text-transform: none;

  .dark & {
    color: $neutral-500;
  }
}

.block-catalog__category-items {
  margin-top: 0.5rem;

  > * + * {
    margin-top: 0.5rem;
  }
}

// Compact block card
.block-catalog-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem;
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;
  cursor: pointer;
  @include transition-fast(border-color, box-shadow);

  &:hover {
    border-color: $primary-400;
    box-shadow: $shadow-sm;
  }

  .dark & {
    border-color: $neutral-700;

    &:hover {
      border-color: $primary-400;
    }
  }
}

.block-catalog-card__thumb {
  width: 4rem;
  height: 2.5rem;
  flex-shrink: 0;
  background-color: $neutral-100;
  border-radius: $radius;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .dark & {
    background-color: $neutral-700;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.block-catalog-card__thumb-placeholder {
  color: $neutral-300;

  .dark & {
    color: $neutral-500;
  }
}

.block-catalog-card__info {
  flex: 1;
  min-width: 0;
}

.block-catalog-card__name {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-700;
  @include truncate;
  @include transition-fast(color);

  .block-catalog-card:hover & {
    color: $primary-600;
  }

  .dark & {
    color: $neutral-200;
  }

  .dark .block-catalog-card:hover & {
    color: $primary-400;
  }
}

.block-catalog-card__category {
  font-size: $font-size-xs;
  color: $neutral-400;
  margin-top: 0.125rem;
}

.block-catalog-card__grip {
  color: $neutral-300;
  flex-shrink: 0;
  margin-top: 0.125rem;
  opacity: 0;
  @include transition-fast(opacity);

  .block-catalog-card:hover & {
    opacity: 1;
  }

  .dark & {
    color: $neutral-600;
  }
}

// Expanded block card
.block-catalog-card--expanded {
  display: block;
  padding: 0;
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;
  cursor: pointer;
  overflow: hidden;
  @include transition-fast(border-color, box-shadow);

  &:hover {
    border-color: $primary-400;
    box-shadow: $shadow-sm;
  }

  .dark & {
    border-color: $neutral-700;

    &:hover {
      border-color: $primary-400;
    }
  }
}

.block-catalog-card__screenshot {
  aspect-ratio: 16 / 9;
  background-color: $neutral-100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .dark & {
    background-color: $neutral-700;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.block-catalog-card__screenshot-placeholder {
  color: $neutral-300;

  .dark & {
    color: $neutral-500;
  }
}

.block-catalog-card__footer {
  padding: 0.5rem 0.75rem;
}

// Preset card in catalog
.block-catalog-preset {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px dashed $neutral-200;
  border-radius: $radius-lg;
  cursor: pointer;
  font-size: $font-size-sm;
  @include transition-fast(border-color);

  &:hover {
    border-color: $primary-400;
  }

  .dark & {
    border-color: $neutral-700;

    &:hover {
      border-color: $primary-500;
    }
  }
}

.block-catalog-preset__thumb {
  width: 2.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-color: $neutral-100;
  border-radius: $radius;
  overflow: hidden;

  .dark & {
    background-color: $neutral-800;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.block-catalog-preset__name {
  flex: 1;
  @include truncate;
  color: $neutral-600;

  .dark & {
    color: $neutral-300;
  }
}

.block-catalog-preset__type-badge {
  font-size: 10px;
  font-weight: $font-weight-medium;
  padding: 0.125rem 0.25rem;
  border-radius: $radius;
  flex-shrink: 0;
}

.block-catalog-preset__type-badge--global {
  background-color: #dbeafe;
  color: #2563eb;

  .dark & {
    background-color: rgba(#1e3a5f, 0.4);
    color: #60a5fa;
  }
}

.block-catalog-preset__type-badge--local {
  background-color: #dcfce7;
  color: #16a34a;

  .dark & {
    background-color: rgba(#14532d, 0.4);
    color: #4ade80;
  }
}

// Catalog panel transition
.catalog-panel-enter-active,
.catalog-panel-leave-active {
  transition: transform $transition-normal ease, opacity $transition-normal ease;
}

.catalog-panel-enter-from,
.catalog-panel-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

// =============================================================================
// Status Dropdown
// =============================================================================

.status-dropdown {
  position: relative;
}

.status-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  border-radius: $radius;
  @include transition-fast(background-color);
  background: none;
  border: none;
  cursor: pointer;
}

.status-dropdown__trigger--success {
  color: $success-600;
  background-color: $success-50;

  &:hover {
    background-color: $success-100;
  }

  .dark & {
    color: $success-400;
    background-color: rgba($success-900, 0.2);

    &:hover {
      background-color: rgba($success-900, 0.3);
    }
  }
}

.status-dropdown__trigger--warning {
  color: $warning-600;
  background-color: $warning-50;

  &:hover {
    background-color: $warning-100;
  }

  .dark & {
    color: $warning-400;
    background-color: rgba($warning-900, 0.2);

    &:hover {
      background-color: rgba($warning-900, 0.3);
    }
  }
}

.status-dropdown__trigger-label {
  display: none;

  @include sm {
    display: inline;
  }
}

.status-dropdown__menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  width: 11rem;
  background-color: #fff;
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  z-index: $z-dropdown;
  padding: 0.25rem 0;

  .dark & {
    background-color: $neutral-800;
    border-color: $neutral-700;
  }
}

.status-dropdown__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: $font-size-sm;
  @include transition-fast(color, background-color);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.status-dropdown__option--selected {
  background-color: $neutral-100;
  color: $neutral-900;
  font-weight: $font-weight-medium;

  .dark & {
    background-color: $neutral-700;
    color: $neutral-50;
  }
}

.status-dropdown__option--unselected {
  color: $neutral-600;

  &:hover {
    background-color: $neutral-50;
  }

  .dark & {
    color: $neutral-300;

    &:hover {
      background-color: $neutral-700;
    }
  }
}

.status-dropdown__option-icon--success {
  color: $success-500;
}

.status-dropdown__option-icon--warning {
  color: $warning-500;
}

// =============================================================================
// Page Editor Empty State
// =============================================================================

.page-editor-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.page-editor-empty__inner {
  text-align: center;
  max-width: 24rem;
}

.page-editor-empty__icon {
  color: $neutral-300;
  margin: 0 auto 1rem;

  .dark & {
    color: $neutral-600;
  }
}

.page-editor-empty__title {
  font-size: $font-size-lg;
  font-weight: $font-weight-semibold;
  color: $neutral-900;
  margin-bottom: 0.5rem;

  .dark & {
    color: $neutral-50;
  }
}

.page-editor-empty__text {
  font-size: $font-size-sm;
  color: $neutral-500;
  margin-bottom: 1.5rem;
}

// =============================================================================
// SEO Preview (Google SERP)
// =============================================================================

.seo-preview {
  padding: 1rem;
  background-color: $neutral-50;
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;

  .dark & {
    background-color: rgba($neutral-800, 0.5);
    border-color: $neutral-700;
  }
}

.seo-preview__label {
  font-size: $font-size-xs;
  color: $neutral-400;
  margin-bottom: 0.5rem;
}

.seo-preview__title {
  color: #1a0dab;
  font-size: $font-size-lg;
  font-weight: $font-weight-normal;
  line-height: 1.375;
  @include truncate;

  .dark & {
    color: $primary-400;
  }
}

.seo-preview__url {
  color: #006621;
  font-size: $font-size-sm;
  line-height: 1.375;
  margin-top: 0.125rem;

  .dark & {
    color: $success-400;
  }
}

.seo-preview__description {
  color: #545454;
  font-size: $font-size-sm;
  line-height: 1.375;
  margin-top: 0.125rem;
  @include line-clamp(2);

  .dark & {
    color: $neutral-400;
  }
}

// =============================================================================
// SEO counter
// =============================================================================

.seo-counter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.125rem;
}

.seo-counter__value {
  font-size: $font-size-xs;
}

.seo-counter__value--ok {
  color: $success-500;
}

.seo-counter__value--warn {
  color: $warning-500;
}

.seo-counter__value--error {
  color: $error-500;
}

.seo-counter__value--empty {
  color: $neutral-400;
}

// =============================================================================
// Page Cities Panel
// =============================================================================

.page-cities__loading {
  padding: 2rem 0;
  text-align: center;
}

.page-cities__loading-icon {
  color: $neutral-400;
  margin: 0 auto;
}

.page-cities__loading-text {
  font-size: $font-size-xs;
  color: $neutral-500;
  margin-top: 0.5rem;
}

.page-cities__empty {
  padding: 2rem 0;
  text-align: center;
}

.page-cities__empty-icon {
  color: $neutral-300;
  margin: 0 auto 0.5rem;
}

.page-cities__empty-title {
  font-size: $font-size-sm;
  color: $neutral-500;
}

.page-cities__empty-hint {
  font-size: $font-size-xs;
  color: $neutral-400;
  margin-top: 0.25rem;
}

.page-cities__list {
  > * + * {
    margin-top: 0.5rem;
  }
}

.page-cities__card {
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;
  padding: 0.75rem;

  .dark & {
    border-color: $neutral-700;
  }
}

.page-cities__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.page-cities__card-name {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-900;

  .dark & {
    color: $neutral-50;
  }
}

.page-cities__status-badge {
  padding: 0.125rem 0.5rem;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  border-radius: $radius-full;
}

.page-cities__card-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.page-cities__action-btn {
  padding: 0.25rem 0.5rem;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  border-radius: $radius;
  color: $neutral-600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  @include transition-fast(background-color);

  &:hover {
    background-color: $neutral-100;
  }

  .dark & {
    color: $neutral-300;

    &:hover {
      background-color: $neutral-700;
    }
  }
}

.page-cities__action-btn--warning {
  color: $warning-600;

  &:hover {
    background-color: $warning-50;
  }

  .dark & {
    color: $warning-400;

    &:hover {
      background-color: rgba($warning-900, 0.2);
    }
  }
}

// =============================================================================
// City Overrides Drawer
// =============================================================================

.city-overrides__loading {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}

.city-overrides__loading-icon {
  color: $neutral-400;
}

.city-overrides__body {
  padding: 1.5rem;

  > * + * {
    margin-top: 1.5rem;
  }
}

.city-overrides__section-title {
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  color: $neutral-900;
  margin-bottom: 0.75rem;

  .dark & {
    color: $neutral-50;
  }
}

.city-overrides__hint {
  margin-top: 0.5rem;
  font-size: $font-size-xs;
  color: $neutral-400;
}

.city-overrides__block-card {
  border: 1px solid $neutral-200;
  border-radius: $radius-lg;
  padding: 0.75rem;

  .dark & {
    border-color: $neutral-700;
  }
}

.city-overrides__block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.city-overrides__block-name {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-900;

  .dark & {
    color: $neutral-50;
  }
}

.city-overrides__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
}

// =============================================================================
// Translation Status
// =============================================================================

.translation-status__title {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-700;

  .dark & {
    color: $neutral-300;
  }
}

.translation-status__list {
  > * + * {
    margin-top: 0.5rem;
  }
}

.translation-status__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.translation-status__lang-name {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-900;

  .dark & {
    color: $neutral-100;
  }
}

.translation-status__count {
  font-size: $font-size-xs;
  color: $neutral-500;

  .dark & {
    color: $neutral-400;
  }
}

.translation-status__bar-track {
  width: 100%;
  background-color: $neutral-200;
  border-radius: $radius-full;
  height: 0.375rem;

  .dark & {
    background-color: $neutral-700;
  }
}

.translation-status__bar-fill {
  height: 0.375rem;
  border-radius: $radius-full;
  @include transition-fast(width);
}

.translation-status__bar-fill--complete {
  background-color: #22c55e;
}

.translation-status__bar-fill--partial {
  background-color: #f59e0b;
}

.translation-status__bar-fill--empty {
  background-color: $neutral-300;

  .dark & {
    background-color: $neutral-600;
  }
}

.translation-status__empty {
  font-size: $font-size-sm;
  color: $neutral-400;

  .dark & {
    color: $neutral-500;
  }
}

// =============================================================================
// Language Selector
// =============================================================================

.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.language-selector__label {
  font-size: $font-size-xs;
  color: $neutral-500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.language-selector__select {
  width: 11rem;
}

.language-selector__badge {
  font-size: $font-size-xs;
  background-color: #dbeafe;
  color: #1d4ed8;
  padding: 0.125rem 0.5rem;
  border-radius: $radius;
  font-weight: $font-weight-medium;
  white-space: nowrap;

  .dark & {
    background-color: rgba(#1e3a5f, 0.3);
    color: #93c5fd;
  }
}

// =============================================================================
// Page Main Fields — screenshot button
// =============================================================================

.page-main-fields__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.page-main-fields__preview-label {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-700;

  .dark & {
    color: $neutral-200;
  }
}

.page-main-fields__screenshot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  border-radius: $radius;
  color: $neutral-500;
  background: none;
  border: none;
  cursor: pointer;
  @include transition-fast(color, background-color);

  &:hover {
    color: $primary-600;
    background-color: $primary-50;
  }

  .dark & {
    color: $neutral-400;

    &:hover {
      color: $primary-400;
      background-color: rgba($primary-900, 0.2);
    }
  }
}

.page-main-fields__screenshot-btn--active {
  color: $primary-600;
  background-color: $primary-50;

  .dark & {
    color: $primary-400;
    background-color: rgba($primary-900, 0.2);
  }
}

// =============================================================================
// Generic helpers used across page-editor components
// =============================================================================

.field-stack {
  > * + * {
    margin-top: 1rem;
  }
}

.field-stack--lg {
  > * + * {
    margin-top: 1.5rem;
  }
}

.text-empty {
  padding: 2rem 0;
  text-align: center;
  font-size: $font-size-sm;
  color: $neutral-500;
}

.icon-sm {
  width: 0.875rem;
  height: 0.875rem;
}

.icon-md {
  width: 1rem;
  height: 1rem;
}

.icon-lg {
  width: 1.25rem;
  height: 1.25rem;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// Block catalog: buffer section
.block-catalog__buffer {
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}

.block-catalog__buffer-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.block-catalog__buffer-items {
  padding: 0 0.5rem 0.25rem;
}

.block-catalog-card--buffer {
  background: var(--highlight-bg);
  border: 1px dashed var(--primary-color);
}

.block-catalog-card__buffer-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  border-radius: var(--border-radius);
  color: var(--text-color-secondary);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;

  .block-catalog-card:hover & {
    opacity: 1;
  }

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