// =============================================================================
// Comments Press Zone - Components
// =============================================================================
// Buttons, badges, inputs, and form components for the admin panel.
// Converted from main.css lines 560-900.
// =============================================================================


// =============================================================================
// BUTTONS
// =============================================================================

.presszone-comments-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: $presszone-comments-radius;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all $presszone-comments-duration-fast $presszone-comments-ease-smooth;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px $presszone-comments-primary-dim, $presszone-comments-shadow;

    @include dark-mode-class {
      box-shadow: 0 0 0 3px $presszone-comments-primary-dim-dark, $presszone-comments-shadow-dark;
    }
  }

  // -----------------------------------------------------------------------------
  // Button Color Variants
  // -----------------------------------------------------------------------------

  &--primary {
    background: linear-gradient(135deg, $presszone-comments-primary, $presszone-comments-primary-hover);
    color: $presszone-comments-text-on-primary;

    &:hover:not(:disabled) {
      background: $presszone-comments-primary-hover;
    }

    @include dark-mode-class {
      background: linear-gradient(135deg, $presszone-comments-primary-dark, $presszone-comments-primary-hover-dark);
      color: $presszone-comments-text-on-primary-dark;

      &:hover:not(:disabled) {
        background: $presszone-comments-primary-hover-dark;
      }
    }
  }

  &--secondary {
    background: $presszone-comments-surface-2;
    color: $presszone-comments-text;

    &:hover:not(:disabled) {
      background: $presszone-comments-border;
    }

    @include dark-mode-class {
      background: $presszone-comments-surface-2-dark;
      color: $presszone-comments-text-dark;

      &:hover:not(:disabled) {
        background: $presszone-comments-border-dark;
      }
    }
  }

  &--ghost {
    background: transparent;
    color: $presszone-comments-text-muted;
    border: 1px solid transparent;

    &:hover:not(:disabled) {
      background: $presszone-comments-surface-2;
      color: $presszone-comments-text;
    }

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;

      &:hover:not(:disabled) {
        background: $presszone-comments-surface-2-dark;
        color: $presszone-comments-text-dark;
      }
    }
  }

  &--success {
    background: $presszone-comments-success;
    color: $presszone-comments-text-on-primary;

    &:hover:not(:disabled) {
      background: $presszone-comments-success-hover;
    }

    @include dark-mode-class {
      background: $presszone-comments-success-dark;

      &:hover:not(:disabled) {
        background: $presszone-comments-success-hover-dark;
      }
    }
  }

  &--danger {
    background: $presszone-comments-error;
    color: $presszone-comments-text-on-primary;

    &:hover:not(:disabled) {
      background: $presszone-comments-error-hover;
    }

    @include dark-mode-class {
      background: $presszone-comments-error-dark;

      &:hover:not(:disabled) {
        background: $presszone-comments-error-hover-dark;
      }
    }
  }

  // -----------------------------------------------------------------------------
  // Button Size Variants
  // -----------------------------------------------------------------------------

  &--lg {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
  }

  &--sm {
    padding: 4px 10px;
    font-size: 12px;
  }

  // -----------------------------------------------------------------------------
  // Button Padding Variants
  // -----------------------------------------------------------------------------

  &--padding-wide {
    padding: $presszone-comments-btn-padding-lg;
  }

  &--padding-standard {
    padding: $presszone-comments-btn-padding-md;
  }

  &--padding-minimal {
    padding: $presszone-comments-btn-padding-sm;
  }

  // -----------------------------------------------------------------------------
  // Button Styling (Border Radius) Variants
  // -----------------------------------------------------------------------------

  &--styling-square {
    border-radius: 0;
  }

  &--styling-rounded {
    border-radius: $presszone-comments-radius;
  }

  &--styling-pill {
    border-radius: 100px;
  }

  // -----------------------------------------------------------------------------
  // Button Border Variants
  // -----------------------------------------------------------------------------

  &--no-borders {
    border-color: transparent !important;
    box-shadow: none !important;

    &:hover {
      border-color: $presszone-comments-border !important;

      @include dark-mode-class {
        border-color: $presszone-comments-border-dark !important;
      }
    }
  }
}

// Icon Button
.presszone-comments-btn-icon {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;

  &:hover {
    opacity: 1;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px $presszone-comments-primary-dim;

    @include dark-mode-class {
      box-shadow: 0 0 0 3px $presszone-comments-primary-dim-dark;
    }
  }

  &--danger {
    &:hover {
      opacity: 1;
      color: $presszone-comments-error;

      @include dark-mode-class {
        color: $presszone-comments-error-dark;
      }
    }
  }
}

// =============================================================================
// BADGES
// =============================================================================

.presszone-comments-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: $presszone-comments-primary-dim;
  color: $presszone-comments-primary;

  @include dark-mode-class {
    background: $presszone-comments-primary-dim-dark;
    color: $presszone-comments-primary-dark;
  }

  // -----------------------------------------------------------------------------
  // Badge Type Variants
  // -----------------------------------------------------------------------------

  &--category {
    background: $presszone-comments-badge-category-bg;
    color: $presszone-comments-badge-category-text;

    @include dark-mode-class {
      background: $presszone-comments-badge-category-bg-dark;
      color: $presszone-comments-badge-category-text-dark;
    }
  }

  &--comments-section {
    background: $presszone-comments-badge-section-bg;
    color: $presszone-comments-badge-section-text;

    @include dark-mode-class {
      background: $presszone-comments-badge-section-bg-dark;
      color: $presszone-comments-badge-section-text-dark;
    }
  }

  &--link {
    background: $presszone-comments-badge-link-bg;
    color: $presszone-comments-badge-link-text;

    @include dark-mode-class {
      background: $presszone-comments-badge-link-bg-dark;
      color: $presszone-comments-badge-link-text-dark;
    }
  }

  &--page {
    background: $presszone-comments-badge-page-bg;
    color: $presszone-comments-badge-page-text;

    @include dark-mode-class {
      background: $presszone-comments-badge-page-bg-dark;
      color: $presszone-comments-badge-page-text-dark;
    }
  }

  // -----------------------------------------------------------------------------
  // Badge Status Variants (for moderation)
  // -----------------------------------------------------------------------------

  &--success {
    background: $presszone-comments-success-dim;
    color: $presszone-comments-success;

    @include dark-mode-class {
      background: $presszone-comments-success-dim-dark;
      color: $presszone-comments-success-dark;
    }
  }

  &--danger {
    background: $presszone-comments-error-dim;
    color: $presszone-comments-error;

    @include dark-mode-class {
      background: $presszone-comments-error-dim-dark;
      color: $presszone-comments-error-dark;
    }
  }

  &--warning {
    background: $presszone-comments-warning-dim;
    color: $presszone-comments-warning;

    @include dark-mode-class {
      background: $presszone-comments-warning-dim-dark;
      color: $presszone-comments-warning-dark;
    }
  }
}

// =============================================================================
// STATUS TAGS
// =============================================================================

.presszone-comments-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  &--ok {
    background: $presszone-comments-success-dim;
    color: $presszone-comments-success;

    @include dark-mode-class {
      background: $presszone-comments-success-dim-dark;
      color: $presszone-comments-success-dark;
    }
  }

  &--missing {
    background: $presszone-comments-error-dim;
    color: $presszone-comments-error;

    @include dark-mode-class {
      background: $presszone-comments-error-dim-dark;
      color: $presszone-comments-error-dark;
    }
  }
}

// =============================================================================
// NODE ITEM ROW LAYOUT
// =============================================================================

.presszone-comments-node-item {
  &__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: $presszone-comments-surface-2;
    border-radius: $presszone-comments-radius;

    @include dark-mode-class {
      background: $presszone-comments-surface-2-dark;
    }
  }

  &__controls {
    display: flex;
    gap: 4px;
  }

  &__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }
}

// =============================================================================
// INPUTS, SELECTS & TEXTAREAS
// =============================================================================

// Base styles shared by all form inputs
.presszone-comments-input,
.presszone-comments-select,
.presszone-comments-textarea {
  width: 100%;
  padding: 10px 12px;
  background: $presszone-comments-surface;
  border: 1px solid $presszone-comments-border;
  border-radius: $presszone-comments-radius-lg;
  color: $presszone-comments-text;
  font-size: 14px;
  transition: border-color 0.15s;

  // Ensure consistent height
  min-height: 44px;
  line-height: 1.5;
  box-sizing: border-box;

  @include dark-mode-class {
    background: $presszone-comments-surface-dark;
    border-color: $presszone-comments-border-dark;
    color: $presszone-comments-text-dark;
  }

  &:focus {
    outline: none;
    border-color: $presszone-comments-primary;

    @include dark-mode-class {
      border-color: $presszone-comments-primary-dark;
    }
  }

  &:focus-visible {
    outline: none;
    border-color: $presszone-comments-primary;
    box-shadow: 0 0 0 3px $presszone-comments-primary-dim;

    @include dark-mode-class {
      border-color: $presszone-comments-primary-dark;
      box-shadow: 0 0 0 3px $presszone-comments-primary-dim-dark;
    }
  }
}

// Settings input variant
.presszone-comments-input--settings {
  @extend .presszone-comments-input;
}

// Settings textarea variant
.presszone-comments-textarea--settings {
  @extend .presszone-comments-textarea;
}

// Settings select with custom dropdown arrow
.presszone-comments-select--settings {
  @extend .presszone-comments-select;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-inline-end: 32px;

  @include dark-mode-class {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

// Input size variants
.presszone-comments-input {
  &--small {
    width: 120px;
  }
}

// Textarea code variant
.presszone-comments-textarea {
  &--code {
    font-family: "SF Mono", "Consolas", monospace;
    font-size: 13px;
  }
}

// -----------------------------------------------------------------------------
// Input/Select/Textarea Padding Variants
// -----------------------------------------------------------------------------

.presszone-comments-input,
.presszone-comments-textarea {
  &--padding-wide {
    padding: 12px 16px !important;
  }

  &--padding-standard {
    padding: 6px 10px !important;
    min-height: 36px !important;  // Reduced to match select with standard padding
  }

  &--padding-minimal {
    padding: 6px 10px !important;
    min-height: 36px !important;
  }
}

.presszone-comments-select {
  &--padding-wide {
    padding: 12px 16px !important;
  }

  &--padding-standard {
    padding: 6px 10px !important;
    min-height: 36px !important;  // Ensure consistent height with input
  }

  &--padding-minimal {
    padding: 6px 10px !important;
    min-height: 36px !important;
  }
}

// -----------------------------------------------------------------------------
// Input/Select/Textarea Styling (Border Radius) Variants
// -----------------------------------------------------------------------------

.presszone-comments-select,
.presszone-comments-input,
.presszone-comments-textarea {
  &--styling-square {
    border-radius: 0 !important;
  }

  &--styling-rounded {
    border-radius: $presszone-comments-radius !important;
  }
}

.presszone-comments-select,
.presszone-comments-input {
  &--styling-pill {
    border-radius: 100px !important;
  }
}

.presszone-comments-textarea {
  &--styling-pill {
    border-radius: 45px !important;
  }
}

// -----------------------------------------------------------------------------
// Input/Select/Textarea Border Variants
// -----------------------------------------------------------------------------

.presszone-comments-select,
.presszone-comments-input,
.presszone-comments-textarea {
  &--no-borders {
    border-color: transparent !important;
    box-shadow: none !important;

    &:hover {
      border-color: $presszone-comments-border !important;

      @include dark-mode-class {
        border-color: $presszone-comments-border-dark !important;
      }
    }
  }
}

// =============================================================================
// FORMS
// =============================================================================

.presszone-comments-form-group {
  margin-bottom: 20px;

  label {
    display: block;
  }
}

// =============================================================================
// AUTOCOMPLETE
// =============================================================================

.presszone-comments-autocomplete {
  position: relative;
  width: 100%;

  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: $presszone-comments-surface;
    border: 1px solid $presszone-comments-border;
    border-radius: $presszone-comments-radius;
    box-shadow: $presszone-comments-shadow;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;

    @include dark-mode-class {
      background: $presszone-comments-surface-dark;
      border-color: $presszone-comments-border-dark;
      box-shadow: $presszone-comments-shadow-dark;
    }

    &.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  &__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;

    &:hover {
      background: $presszone-comments-surface-2;

      @include dark-mode-class {
        background: $presszone-comments-surface-2-dark;
      }
    }
  }

  &__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  &__info {
    flex: 1;
    min-width: 0;
  }

  &__name {
    font-weight: 500;
    font-size: 14px;
    color: $presszone-comments-text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @include dark-mode-class {
      color: $presszone-comments-text-dark;
    }
  }

  &__username {
    font-size: 12px;
    color: $presszone-comments-text-muted;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;
    }
  }

  &__message {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: $presszone-comments-text-muted;

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;
    }

    &--error {
      color: $presszone-comments-error;
    }
  }
}

// =============================================================================
// SETTINGS CARD COMPONENT
// =============================================================================
// Used throughout Settings, Tools, and Design pages for grouping content.

.presszone-comments-settings-card {
  background: $presszone-comments-surface;
  border: 1px solid $presszone-comments-border;
  border-radius: $presszone-comments-radius-lg;
  margin-bottom: 20px;
  overflow: hidden;

  @include dark-mode-class {
    background: $presszone-comments-surface-dark;
    border-color: $presszone-comments-border-dark;
  }

  // Card Header - Icon + Title/Description in a ROW
  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid $presszone-comments-border;
    cursor: default;

    @include dark-mode-class {
      border-bottom-color: $presszone-comments-border-dark;
    }
  }

  // Icon container - inline with title
  &__icon {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // Title
  &__title {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: $presszone-comments-text;
    line-height: 1.3;

    @include dark-mode-class {
      color: $presszone-comments-text-dark;
    }
  }

  // Description
  &__desc {
    margin: 2px 0 0 0 !important;
    font-size: 13px;
    color: $presszone-comments-text-muted;
    line-height: 1.4;

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;
    }
  }

  // Card Body
  &__body {
    padding: 20px 24px;
  }

  // Info blocks inside settings cards
  &__info {
    padding: 12px 16px;
    background: $presszone-comments-surface-2;
    border-radius: $presszone-comments-radius;
    font-size: 13px;
    color: $presszone-comments-text-muted;

    @include dark-mode-class {
      background: $presszone-comments-surface-2-dark;
      color: $presszone-comments-text-muted-dark;
    }
  }

  // Collapsible state
  &--collapsible {
    .presszone-comments-settings-card__header {
      cursor: pointer;
      transition: background-color 0.15s;

      &:hover {
        background: $presszone-comments-surface-2;

        @include dark-mode-class {
          background: $presszone-comments-surface-2-dark;
        }
      }
    }
  }

  &--collapsed {
    .presszone-comments-settings-card__body {
      display: none;
    }

    .presszone-comments-settings-card__header {
      border-bottom: none;
    }
  }

  // Warning state
  &--warning {
    border-color: $presszone-comments-warning;

    .presszone-comments-settings-card__header {
      background: rgba($presszone-comments-warning, 0.1);
      border-bottom-color: rgba($presszone-comments-warning, 0.3);
    }
  }
}

// =============================================================================
// TOOL ITEM COMPONENT
// =============================================================================
// Used in Tools page for individual tool actions.

.presszone-comments-tool-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid $presszone-comments-border;

  @include dark-mode-class {
    border-bottom-color: $presszone-comments-border-dark;
  }

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

  &:first-child {
    padding-top: 0;
  }

  // Icon - inline on the left
  &__icon {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }

  // Content - takes remaining space
  &__content {
    flex: 1;
    min-width: 0;
  }

  // Title
  &__title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: $presszone-comments-text;
    line-height: 1.3;

    @include dark-mode-class {
      color: $presszone-comments-text-dark;
    }
  }

  // Description
  &__desc {
    margin: 0;
    font-size: 13px;
    color: $presszone-comments-text-muted;
    line-height: 1.4;

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;
    }
  }

  // Help text
  &__help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: $presszone-comments-text-muted;
    opacity: 0.8;

    @include dark-mode-class {
      color: $presszone-comments-text-muted-dark;
    }
  }

  // Action button container
  &__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  // Running state
  &--running {
    opacity: 0.7;
  }

  // Success state
  &--success {
    .presszone-comments-tool-item__icon {
      color: $presszone-comments-success;
    }
  }
}

// Tool spinner
.presszone-comments-tool-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: presszone-comments-spin 0.8s linear infinite;
}

// Tool checkmark
.presszone-comments-tool-checkmark {
  display: inline-block;
  color: $presszone-comments-success;
  font-weight: bold;
}

// =============================================================================
// STAT CARD COMPONENT
// =============================================================================
// Used in Dashboard and Moderation Overview for statistics.
// Single-line horizontal layout: icon | number | label

.presszone-comments-stat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: $presszone-comments-surface;
  border-radius: $presszone-comments-radius-lg;
  padding: 20px;
  border-left: 4px solid transparent;
  transition: border-color 0.2s ease;

  @include dark-mode-class {
    background: $presszone-comments-surface-dark;
  }

  // Icon on left
  &__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }

  // Value (number) in middle
  &__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.2s ease;
    flex-shrink: 0;
  }

  // Label on right - smaller, medium weight
  &__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  // Color modifiers
  &--red {
    border-left-color: #e53935;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #e53935;
    }
  }

  &--orange {
    border-left-color: #fb8c00;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #fb8c00;
    }
  }

  &--yellow {
    border-left-color: #fdd835;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #fdd835;
    }
  }

  &--blue {
    border-left-color: #42a5f5;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #42a5f5;
    }
  }

  &--green {
    border-left-color: #43a047;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #43a047;
    }
  }

  &--purple {
    border-left-color: #8e24aa;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #8e24aa;
    }
  }

  &--cyan {
    border-left-color: #00acc1;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #00acc1;
    }
  }

  &--brown {
    border-left-color: #6d4c41;

    .presszone-comments-stat-card__value,
    .presszone-comments-stat-card__label {
      color: #6d4c41;
    }
  }
}

// Stats grid container
.presszone-comments-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

// =============================================================================
// TOOLS PAGE GRID
// =============================================================================

.presszone-comments-tools {
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}