/**
 * Feedspace Admin Shared Styles
 *
 * Common styles used across multiple admin pages
 *
 * @package Feedspace
 * @since 1.0.0
 */

@use "sass:color";

// Variables
$primary-color: #2563eb;
$secondary-color: #764ba2;
$success-color: #46b450;
$error-color: #dc3232;
$warning-color: #ffb900;
$text-color: #23282d;
$border-color: #ddd;
$background-color: #f9f9f9;

// Mixins
@mixin gradient-background($start-color, $end-color) {
  background: linear-gradient(135deg, $start-color 0%, $end-color 100%);
}

@mixin card-style {
  background: white;
  border: 1px solid $border-color;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

@mixin button-style($bg-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;

  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }
}

// Main admin container
.feedspace-admin {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0.25rem 1rem 0.25rem;
  
  // Override WordPress default .wrap margins
  .wrap {
    margin: 0 !important;
  }

  // Page header
  .feedspace-page-header {
    background: #fff;
    border-bottom: 1px solid #e1e5e9;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, #e1e5e9 50%, transparent 100%);
    }
    
    .feedspace-page-title {
      h1 {
        margin: 0 0 0.5rem 0;
        font-size: 1.75rem;
        font-weight: 600;
        color: $text-color;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        letter-spacing: -0.025em;
      }
      
      p {
        margin: 0;
        color: #666;
        font-size: 0.95rem;
        line-height: 1.4;
        font-weight: 400;
        max-width: 600px;
      }
    }
  }

  // Content area
  .feedspace-content {
    .feedspace-card {
      @include card-style;

      h2 {
        margin: 0 0 1rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: $text-color;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      }

      p {
        margin: 0 0 1.5rem 0;
        color: #666;
        font-size: 0.95rem;
        line-height: 1.5;
      }
    }

    // Form sections
    .feedspace-form-section {
      margin-bottom: 1.5rem;

      .feedspace-widget-input {
        margin-bottom: 1.5rem;

        label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 600;
          color: $text-color;
          font-size: 0.95rem;
        }

        .feedspace-input-wrapper {
          position: relative;
          max-width: 800px; // Make widget ID input wider
        }

        .feedspace-text-input {
          max-width: 100%;
          min-width: 500px; // Ensure minimum width for widget IDs
        }

        .feedspace-textarea {
          width: 100%;
          min-height: 120px;
          padding: 0.75rem;
          border: 1px solid $border-color;
          border-radius: 4px;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          font-size: 13px;
          resize: vertical;
          transition: border-color 0.3s ease;

          &:focus {
            outline: none;
            border-color: $primary-color;
            box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
          }
        }
      }

      .feedspace-button-group {
        margin-top: 1rem;

        .feedspace-button {
          @include button-style($primary-color);
          margin-right: 0.75rem;

          &.feedspace-button-secondary {
            @include button-style($secondary-color);
          }

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

    // Usage section
    .feedspace-usage {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      .feedspace-usage-item {
        padding: 1.5rem;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;

        h3 {
          font-size: 1.1rem;
          font-weight: 600;
          color: $text-color;
          margin: 0 0 1rem 0;
        }

        code {
          display: inline-block;
          background: rgba(37, 99, 235, 0.1);
          color: rgb(37 99 235);
          padding: 0.5rem 0.75rem;
          border-radius: 6px;
          border: 1px solid rgba(37, 99, 235, 0.2);
          font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
          font-size: 13px;
          margin: 0.5rem 0;
          backdrop-filter: blur(10px);
          box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
        }

        p {
          margin: 0.5rem 0 0 0;
          color: #666;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }

    // Preview section
    .feedspace-preview {
      min-height: 200px;
      border: 2px dashed $border-color;
      border-radius: 8px;
      background: $background-color;
      position: relative;
      overflow: hidden;

      .feedspace-preview-content {
        width: 100%;
        height: 100%;
        min-height: 200px;
        position: relative;
        padding: 1rem;
      }

      .feedspace-preview-placeholder {
        text-align: center;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 200px;

        p {
          margin: 0;
          font-size: 14px;
          font-style: italic;
        }
      }
    }
  }

  // Message styles
  .feedspace-message {
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 0.95rem;

    &.feedspace-message-success {
      background-color: rgba($success-color, 0.1);
      border-color: $success-color;
      color: color.adjust($success-color, $lightness: -10%);
    }

    &.feedspace-message-error {
      background-color: rgba($error-color, 0.1);
      border-color: $error-color;
      color: color.adjust($error-color, $lightness: -10%);
    }

    &.feedspace-message-info {
      background-color: rgba($primary-color, 0.1);
      border-color: $primary-color;
      color: color.adjust($primary-color, $lightness: -10%);
    }
  }

  // Button styles (global)
  .feedspace-button {
    @include button-style($primary-color);
    margin-right: 0.75rem;

    &.feedspace-button-secondary {
      @include button-style($secondary-color);
    }

    &.feedspace-button-primary {
      @include button-style($primary-color);
    }

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