// ==========================================================================
// Help & Support Page Styles
// ==========================================================================

// Help page specific layout and styling
.help-page {
  .help-layout {
    min-height: calc(100vh - var(--header-height) - var(--footer-height) - 2rem);
  }

  .help-sidebar {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 0;
    height: fit-content;
  }

  .help-nav {
    padding: 1rem;

    .nav-link {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      margin-bottom: 0.5rem;
      border-radius: var(--border-radius);
      text-decoration: none;
      color: var(--bs-body-color);
      transition: all var(--transition-fast);
      border: 1px solid transparent;

      &:hover {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
        border-color: rgba(var(--bs-primary-rgb), 0.2);
      }

      &.active {
        background: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
      }

      i {
        font-size: 1rem;
        width: 20px;
      }
    }
  }

  .help-section {
    // No default styles - sections are shown/hidden via Alpine.js
  }

  // Article cards for help content
  .article-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all var(--transition-fast);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-lg);
      border-color: rgba(var(--bs-primary-rgb), 0.3);
    }

    .article-meta {
      font-size: 0.875rem;
      color: var(--bs-secondary);

      .rating-stars {
        color: #fbbf24;
        margin-right: 0.5rem;
      }
    }
  }

  // Contact cards
  .contact-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: all var(--transition-base);

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--box-shadow-lg);
    }

    .contact-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 1rem;

      i {
        font-size: 1.5rem;
      }
    }
  }

  // Status indicators
  .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;

    &.status-operational {
      background-color: var(--bs-success);
    }

    &.status-maintenance {
      background-color: var(--bs-warning);
    }

    &.status-down {
      background-color: var(--bs-danger);
    }
  }

  // Video thumbnail
  .video-thumbnail {
    position: relative;
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all var(--transition-fast);

    &:hover {
      transform: scale(1.02);
    }

    .video-play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--bs-primary);
      transition: all var(--transition-fast);

      &:hover {
        background: white;
        transform: translate(-50%, -50%) scale(1.1);
      }
    }
  }

  // Search highlight
  .search-highlight {
    background-color: yellow;
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
  }

  .faq-search {
    margin-bottom: 2rem;

    .search-container {
      position: relative;

      .form-control {
        padding-left: 2.5rem;
        border-radius: 50px;
        border: 2px solid var(--bs-border-color);

        &:focus {
          border-color: var(--bs-primary);
          box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
        }
      }

      .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color);
      }
    }
  }

  .faq-item {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all var(--transition-fast);

    &:hover {
      border-color: var(--bs-primary);
      box-shadow: var(--box-shadow);
    }

    .faq-question {
      display: block;
      width: 100%;
      padding: 1.25rem 1.5rem;
      background: var(--bs-body-bg);
      border: none;
      text-align: left;
      font-weight: 500;
      color: var(--bs-body-color);
      cursor: pointer;
      transition: all var(--transition-fast);
      position: relative;

      &:hover {
        background: rgba(var(--bs-primary-rgb), 0.05);
      }

      &.active {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
      }

      &::after {
        content: "+";
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        font-weight: bold;
        transition: transform var(--transition-fast);
      }

      &.active::after {
        content: "−";
        transform: translateY(-50%) rotate(180deg);
      }
    }

    .faq-answer {
      padding: 0 1.5rem;
      max-height: 0;
      overflow: hidden;
      transition: all var(--transition-fast);
      border-top: 1px solid transparent;

      &.show {
        max-height: 500px;
        padding: 1.5rem;
        border-top-color: var(--bs-border-color);
      }

      p {
        margin-bottom: 1rem;
        line-height: 1.6;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .documentation-nav {
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-bottom: 2rem;

    .nav-tabs {
      border: none;

      .nav-link {
        border: none;
        border-radius: var(--bs-border-radius-sm);
        color: var(--bs-secondary-color);
        background: transparent;
        transition: all 0.2s ease-in-out;

        &:hover {
          background: var(--bs-primary-bg-subtle);
          color: var(--bs-primary);
        }

        &.active {
          background: var(--bs-primary);
          color: var(--bs-white);
        }
      }
    }
  }

  .documentation-content {
    .doc-section {
      margin-bottom: 2rem;

      .section-title {
        color: var(--bs-emphasis-color);
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--bs-primary);
      }

      .section-content {
        line-height: 1.6;

        p {
          margin-bottom: 1rem;
        }

        ul, ol {
          margin-bottom: 1rem;
          padding-left: 1.5rem;

          li {
            margin-bottom: 0.5rem;
          }
        }

        code {
          background: var(--bs-secondary-bg);
          padding: 0.25rem 0.5rem;
          border-radius: var(--bs-border-radius-sm);
          font-size: 0.875rem;
        }

        .code-block {
          background: var(--bs-dark);
          color: var(--bs-light);
          padding: 1rem;
          border-radius: var(--bs-border-radius);
          margin: 1rem 0;
          font-family: monospace;
          font-size: 0.875rem;
          overflow-x: auto;
        }
      }
    }
  }

  .contact-options {
    .contact-card {
      @include admin-card();
      text-align: center;
      padding: 2rem;
      height: 100%;
      transition: all 0.2s ease-in-out;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .contact-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 1rem;

        &.email {
          background-color: var(--bs-primary-bg-subtle);
          color: var(--bs-primary);
        }

        &.chat {
          background-color: var(--bs-success-bg-subtle);
          color: var(--bs-success);
        }

        &.phone {
          background-color: var(--bs-info-bg-subtle);
          color: var(--bs-info);
        }

        &.community {
          background-color: var(--bs-warning-bg-subtle);
          color: var(--bs-warning);
        }
      }

      .contact-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--bs-emphasis-color);
      }

      .contact-description {
        color: var(--bs-secondary-color);
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
      }

      .btn {
        @include button-hover-lift();
      }
    }
  }

  .help-stats {
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      text-align: center;

      .stat-item {
        .stat-number {
          font-size: 2rem;
          font-weight: 700;
          color: var(--bs-primary);
          margin-bottom: 0.25rem;
        }

        .stat-label {
          color: var(--bs-primary-text-emphasis);
          font-size: 0.875rem;
          margin: 0;
        }
      }
    }
  }

  .recent-updates {
    .update-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid var(--bs-border-color);

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

      .update-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--bs-info-bg-subtle);
        color: var(--bs-info);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .update-content {
        flex: 1;

        .update-title {
          font-weight: 500;
          margin-bottom: 0.25rem;
        }

        .update-description {
          color: var(--bs-secondary-color);
          font-size: 0.875rem;
          margin-bottom: 0.25rem;
        }

        .update-date {
          color: var(--bs-secondary-color);
          font-size: 0.75rem;
          margin: 0;
        }
      }
    }
  }
}