.forum {
  &-container {
    max-width: $container-max-width;
    margin: 0 auto;
    padding: $spacing-lg;

    @media (max-width: $breakpoint-md) {
      padding: $spacing-md;
    }
  }

  &-header {
    margin-bottom: $spacing-xl;

    h1 {
      font-size: 2.25rem;
      font-weight: 600;
      color: $white;
      margin-bottom: $spacing-md;
    }

    p {
      color: $light-gray;
      font-size: 1.1rem;
    }
  }

  &-breadcrumbs {
    display: flex;
    align-items: center;
    margin-bottom: $spacing-lg;

    a {
      color: $primary-color;
      text-decoration: none;
      transition: $transition-base;

      &:hover {
        color: $primary-light;
      }
    }

    .separator {
      margin: 0 $spacing-sm;
      color: $mid-gray;
    }

    .current {
      color: $light-gray;
    }
  }

  &-category {
    background-color: $dark-gray-lighter;
    border-radius: $border-radius-md;
    margin-bottom: $spacing-lg;
    overflow: hidden;
    box-shadow: $box-shadow-sm;

    &-header {
      background-color: $dark-gray-lightest;
      padding: $spacing-md $spacing-lg;
      border-bottom: 1px solid rgba($black, 0.1);

      h2 {
        font-size: 1.25rem;
        font-weight: 600;
        color: $white;
        margin: 0;
      }
    }

    &-boards {
      .forum-board {
        display: flex;
        padding: $spacing-md $spacing-lg;
        border-bottom: 1px solid rgba($black, 0.1);
        transition: $transition-base;

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

        &:hover {
          background-color: rgba($black, 0.1);
        }

        &-icon {
          flex: 0 0 48px;
          height: 48px;
          margin-right: $spacing-md;
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            color: $primary-color;
            width: 24px;
            height: 24px;
          }
        }

        &-info {
          flex: 1;

          h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0 0 $spacing-xs 0;

            a {
              color: $white;
              text-decoration: none;
              transition: $transition-base;

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

          p {
            color: $light-gray;
            font-size: 0.9rem;
            margin: 0;
          }
        }

        &-stats {
          flex: 0 0 140px;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: center;

          .threads,
          .posts {
            display: flex;
            align-items: center;
            color: $light-gray;
            font-size: 0.9rem;

            svg {
              width: 16px;
              height: 16px;
              margin-right: $spacing-xs;
            }
          }

          .threads {
            margin-bottom: $spacing-xs;
          }
        }

        &-latest {
          flex: 0 0 200px;
          padding-left: $spacing-md;

          .thread {
            font-size: 0.9rem;

            a {
              color: $primary-color;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }

          .meta {
            font-size: 0.8rem;
            color: $light-gray;
            margin-top: $spacing-xs;

            a {
              color: $light-gray;
              text-decoration: none;

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

        @media (max-width: $breakpoint-md) {
          flex-wrap: wrap;

          &-stats {
            display: none;
          }

          &-latest {
            flex: 0 0 100%;
            padding-left: 60px;
            margin-top: $spacing-sm;
          }
        }

        @media (max-width: $breakpoint-sm) {
          flex-direction: column;
          gap: $spacing-sm;
          
          &-icon {
            margin-right: 0;
            margin-bottom: $spacing-sm;
          }
          
          &-info {
            width: 100%;
          }

          &-latest {
            display: none;
          }
        }
      }
    }
  }

  &-board {
    &-header {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;
      margin-bottom: $spacing-lg;

      h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: $white;
        margin: 0 0 $spacing-sm 0;
      }

      p {
        color: $light-gray;
        margin: 0;
      }

      .actions {
        margin-top: $spacing-md;

        .btn {
          background-color: $primary-color;
          color: $white;
          border: none;
          border-radius: $border-radius-sm;
          padding: $spacing-sm $spacing-md;
          font-size: 0.9rem;
          font-weight: 500;
          text-decoration: none;
          transition: $transition-base;

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

    &-threads {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      overflow: hidden;

      .thread-header {
        background-color: $dark-gray-lightest;
        padding: $spacing-sm $spacing-lg;
        display: flex;
        border-bottom: 1px solid rgba($black, 0.1);

        .title {
          flex: 1;
          font-weight: 600;
          color: $white;
        }

        .replies {
          flex: 0 0 100px;
          text-align: center;
          color: $white;
        }

        .views {
          flex: 0 0 100px;
          text-align: center;
          color: $white;
        }

        .activity {
          flex: 0 0 200px;
          color: $white;
        }

        @media (max-width: $breakpoint-md) {
          .replies,
          .views {
            display: none;
          }

          .activity {
            flex: 0 0 140px;
          }
        }

        @media (max-width: $breakpoint-sm) {
          .activity {
            display: none;
          }
        }
      }

      .thread-item {
        display: flex;
        padding: $spacing-md $spacing-lg;
        border-bottom: 1px solid rgba($black, 0.1);
        transition: $transition-base;

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

        &:hover {
          background-color: rgba($black, 0.1);
        }

        &.pinned {
          background-color: rgba($primary-color, 0.1);

          .pin-icon {
            color: $primary-color;
            margin-right: $spacing-xs;
          }
        }

        &.locked {
          .lock-icon {
            color: $danger;
            margin-right: $spacing-xs;
          }
        }

        .thread-info {
          flex: 1;

          h3 {
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0 0 $spacing-xs 0;
            display: flex;
            align-items: center;

            a {
              color: $white;
              text-decoration: none;
              transition: $transition-base;

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

          .meta {
            color: $light-gray;
            font-size: 0.9rem;

            a {
              color: $light-gray;
              text-decoration: none;

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

        .thread-replies {
          flex: 0 0 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $light-gray;
          font-size: 0.9rem;
        }

        .thread-views {
          flex: 0 0 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $light-gray;
          font-size: 0.9rem;
        }

        .thread-activity {
          flex: 0 0 200px;
          font-size: 0.9rem;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .time {
            color: $light-gray;
          }

          .user {
            margin-top: $spacing-xs;

            a {
              color: $primary-color;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }

        @media (max-width: $breakpoint-md) {
          .thread-replies,
          .thread-views {
            display: none;
          }

          .thread-activity {
            flex: 0 0 140px;
          }
        }

        @media (max-width: $breakpoint-sm) {
          .thread-activity {
            display: none;
          }
        }
      }
    }
  }

  &-thread {
    &-header {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;
      margin-bottom: $spacing-lg;
      position: relative;

      h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: $white;
        margin: 0 0 $spacing-sm 0;
      }

      .meta {
        display: flex;
        align-items: center;
        color: $light-gray;
        font-size: 0.9rem;

        .dot {
          display: inline-block;
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background-color: $light-gray;
          margin: 0 $spacing-sm;
        }

        a {
          color: $primary-color;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
      
      .thread-moderation {
        position: absolute;
        top: $spacing-lg;
        right: $spacing-lg;
        
        .btn {
          background-color: rgba($dark-gray-lightest, 0.7);
          color: $white;
          border: none;
          border-radius: $border-radius-sm;
          padding: $spacing-xs $spacing-sm;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: $transition-base;
          
          svg {
            margin-right: $spacing-xs;
          }
          
          &:hover {
            background-color: $dark-gray-lightest;
          }
          
          &.moderation-btn {
            background-color: rgba($primary-color, 0.1);
            color: $primary-color;
            
            &:hover {
              background-color: rgba($primary-color, 0.2);
            }
          }
          
          &.edit-btn {
            background-color: rgba($info, 0.1);
            color: $info;
            
            &:hover {
              background-color: rgba($info, 0.2);
            }
          }
        }
        
        .dropdown {
          position: relative;
          display: inline-block;
          
          &-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: $dark-gray-lighter;
            min-width: 160px;
            box-shadow: $box-shadow-md;
            border-radius: $border-radius-sm;
            z-index: 10;
            
            a, button {
              display: flex;
              align-items: center;
              color: $white;
              padding: $spacing-sm $spacing-md;
              text-decoration: none;
              font-size: 0.9rem;
              width: 100%;
              text-align: left;
              background: none;
              border: none;
              cursor: pointer;
              transition: $transition-base;
              
              svg {
                margin-right: $spacing-sm;
              }
              
              &:hover {
                background-color: rgba($black, 0.1);
              }
              
              &.edit-link {
                color: $info;
              }
              
              &.lock-link {
                color: $warning;
              }
              
              &.pin-link {
                color: $primary-color;
              }
              
              &.delete-link {
                color: $danger;
              }
            }
          }
          
          &:hover .dropdown-content {
            display: block;
          }
        }

        @media (max-width: $breakpoint-md) {
          position: static;
          margin-top: $spacing-md;
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    &-content {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;
      margin-bottom: $spacing-lg;

      .author {
        display: flex;
        margin-bottom: $spacing-md;
        padding-bottom: $spacing-md;
        border-bottom: 1px solid rgba($black, 0.1);

        .avatar {
          flex: 0 0 60px;
          margin-right: $spacing-md;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
          }
        }

        .info {
          .name {
            font-size: 1.1rem;
            font-weight: 500;
            color: $white;
            margin: 0 0 $spacing-xs 0;
          }

          .role {
            display: inline-block;
            font-size: 0.8rem;
            background-color: $primary-color;
            color: $white;
            padding: $spacing-xs $spacing-sm;
            border-radius: $border-radius-sm;
            margin-bottom: $spacing-xs;
          }

          .joined {
            font-size: 0.9rem;
            color: $light-gray;
          }
        }
      }

      .content {
        color: $white;
        line-height: 1.6;

        p {
          margin-bottom: $spacing-md;
        }

        img {
          max-width: 100%;
          border-radius: $border-radius-sm;
        }

        blockquote {
          border-left: 3px solid $primary-color;
          padding-left: $spacing-md;
          margin-left: 0;
          color: $light-gray;
        }

        pre {
          background-color: $dark-gray;
          padding: $spacing-md;
          border-radius: $border-radius-sm;
          overflow-x: auto;
          font-family: monospace;
        }
      }

      .reactions {
        display: flex;
        gap: $spacing-sm;
        margin-top: $spacing-lg;

        .reaction {
          display: flex;
          align-items: center;
          background-color: $dark-gray;
          border-radius: $border-radius-lg;
          padding: $spacing-xs $spacing-sm;
          cursor: pointer;
          transition: $transition-base;
          border: 1px solid transparent;

          &:hover {
            background-color: $dark-gray-lightest;
          }

          &.active {
            border-color: $primary-color;
          }

          .emoji {
            margin-right: $spacing-xs;
            font-size: 1.1rem;
          }

          .count {
            font-size: 0.9rem;
            color: $light-gray;
            font-weight: 500;
          }
        }
      }
    }

    &-replies {
      margin-bottom: $spacing-lg;

      h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: $white;
        margin-bottom: $spacing-md;
      }

      .post {
        background-color: $dark-gray-lighter;
        border-radius: $border-radius-md;
        padding: $spacing-lg;
        margin-bottom: $spacing-md;
        position: relative;

        .author {
          display: flex;
          margin-bottom: $spacing-md;
          padding-bottom: $spacing-md;
          border-bottom: 1px solid rgba($black, 0.1);

          .avatar {
            flex: 0 0 50px;
            margin-right: $spacing-md;

            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              object-fit: cover;
            }
          }

          .info {
            flex: 1;

            .name-time {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .name {
                font-size: 1rem;
                font-weight: 500;
                color: $white;
              }

              .time {
                font-size: 0.9rem;
                color: $light-gray;
                
                .edited-tag {
                  font-size: 0.8rem;
                  color: $mid-gray;
                  font-style: italic;
                  margin-left: $spacing-xs;
                }
              }
            }

            .role {
              display: inline-block;
              font-size: 0.8rem;
              background-color: $primary-color;
              color: $white;
              padding: $spacing-xs $spacing-sm;
              border-radius: $border-radius-sm;
              margin-top: $spacing-xs;
            }
            
            .post-actions {
              display: flex;
              gap: $spacing-xs;
              margin-top: $spacing-xs;
              
              .post-action {
                display: flex;
                align-items: center;
                padding: $spacing-xs $spacing-sm;
                font-size: 0.8rem;
                border-radius: $border-radius-sm;
                text-decoration: none;
                transition: $transition-base;
                
                svg {
                  margin-right: $spacing-xs;
                }
                
                &.edit {
                  background-color: rgba($info, 0.1);
                  color: $info;
                  
                  &:hover {
                    background-color: rgba($info, 0.2);
                  }
                }
                
                &.delete {
                  background-color: rgba($danger, 0.1);
                  color: $danger;
                  border: none;
                  cursor: pointer;
                  
                  &:hover {
                    background-color: rgba($danger, 0.2);
                  }
                }
              }
            }
          }
        }

        .content {
          color: $white;
          line-height: 1.6;

          p {
            margin-bottom: $spacing-md;

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

        .reactions {
          display: flex;
          gap: $spacing-sm;
          margin-top: $spacing-lg;

          .reaction {
            display: flex;
            align-items: center;
            background-color: $dark-gray;
            border-radius: $border-radius-lg;
            padding: $spacing-xs $spacing-sm;
            cursor: pointer;
            transition: $transition-base;
            border: 1px solid transparent;

            &:hover {
              background-color: $dark-gray-lightest;
            }

            &.active {
              border-color: $primary-color;
            }

            .emoji {
              margin-right: $spacing-xs;
              font-size: 1.1rem;
            }

            .count {
              font-size: 0.9rem;
              color: $light-gray;
              font-weight: 500;
            }
          }
        }
      }
    }

    &-reply-form {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;

      h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: $white;
        margin-bottom: $spacing-md;
      }

      .form-group {
        margin-bottom: $spacing-md;

        textarea {
          width: 100%;
          background-color: $dark-gray;
          border: 1px solid $dark-gray-lightest;
          border-radius: $border-radius-sm;
          padding: $spacing-md;
          color: $white;
          min-height: 150px;
          resize: vertical;
          font-family: $font-family-base;
          line-height: 1.6;
          transition: $transition-base;

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

      .form-actions {
        display: flex;
        justify-content: flex-end;

        button {
          background-color: $primary-color;
          color: $white;
          border: none;
          border-radius: $border-radius-sm;
          padding: $spacing-sm $spacing-lg;
          font-weight: 500;
          cursor: pointer;
          transition: $transition-base;

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

          &:disabled {
            background-color: $mid-gray;
            cursor: not-allowed;
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-top: $spacing-lg;

    .page-item {
      margin: 0 $spacing-xs;

      .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background-color: $dark-gray-lighter;
        color: $light-gray;
        border-radius: $border-radius-sm;
        text-decoration: none;
        transition: $transition-base;

        &:hover {
          background-color: $dark-gray-lightest;
        }
      }

      &.active {
        .page-link {
          background-color: $primary-color;
          color: $white;
        }
      }

      &.disabled {
        .page-link {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
        }
      }
    }
  }
  
  &-edit {
    &-thread,
    &-post {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;
      margin-bottom: $spacing-lg;
      
      h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: $white;
        margin: 0 0 $spacing-lg 0;
      }
      
      .form-group {
        margin-bottom: $spacing-md;
        
        label {
          display: block;
          color: $white;
          font-weight: 500;
          margin-bottom: $spacing-xs;
        }
        
        input, textarea {
          width: 100%;
          background-color: $dark-gray;
          border: 1px solid $dark-gray-lightest;
          border-radius: $border-radius-sm;
          padding: $spacing-md;
          color: $white;
          font-family: $font-family-base;
          transition: $transition-base;
          
          &:focus {
            outline: none;
            border-color: $primary-color;
            box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
          }
        }
        
        .error-message {
          color: $danger;
          font-size: 0.9rem;
          margin-top: $spacing-xs;
        }
      }
      
      .moderation-options {
        background-color: rgba($black, 0.1);
        border-radius: $border-radius-sm;
        padding: $spacing-md;
        margin-bottom: $spacing-lg;
        
        h3 {
          font-size: 1.1rem;
          font-weight: 600;
          color: $white;
          margin: 0 0 $spacing-sm 0;
        }
        
        .form-check {
          display: flex;
          align-items: center;
          margin-bottom: $spacing-xs;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          input[type="checkbox"] {
            margin-right: $spacing-sm;
            flex: 0 0 auto;
            cursor: pointer;
          }
          
          label {
            display: flex;
            align-items: center;
            color: $white;
            cursor: pointer;
            
            svg {
              margin-right: $spacing-xs;
            }
          }
        }
      }
      
      .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: $spacing-md;
        
        .btn {
          padding: $spacing-sm $spacing-lg;
          border-radius: $border-radius-sm;
          font-weight: 500;
          cursor: pointer;
          transition: $transition-base;
          
          &-secondary {
            background-color: $dark-gray;
            color: $white;
            border: none;
            
            &:hover {
              background-color: darken($dark-gray, 5%);
            }
          }
          
          &-primary {
            background-color: $primary-color;
            color: $white;
            border: none;
            
            &:hover {
              background-color: $primary-dark;
            }
          }
        }
      }
    }
  }

  &-stats {
    margin-bottom: $spacing-xl;

    .row {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -$spacing-md;

      @media (max-width: $breakpoint-md) {
        flex-direction: column;
      }
    }

    .col-md-4 {
      flex: 0 0 33.333333%;
      padding: 0 $spacing-md;

      @media (max-width: $breakpoint-md) {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: $spacing-md;

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

    .stat-card {
      background-color: $dark-gray-lighter;
      border-radius: $border-radius-md;
      padding: $spacing-lg;
      text-align: center;
      box-shadow: $box-shadow-sm;
      transition: $transition-base;

      &:hover {
        transform: translateY(-3px);
        box-shadow: $box-shadow-md;
      }

      .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: $primary-color;
        margin-bottom: $spacing-sm;
      }

      .stat-label {
        color: $light-gray;
        font-size: 1rem;
        font-weight: 500;
      }
    }
  }
}

.inline-form {
  display: inline;
}

.no-replies {
  background-color: rgba($black, 0.1);
  padding: $spacing-md;
  border-radius: $border-radius-sm;
  text-align: center;
  color: $light-gray;
  font-style: italic;
}

.forum-thread-locked-message {
  background-color: rgba($danger, 0.1);
  padding: $spacing-md;
  border-radius: $border-radius-sm;
  margin-top: $spacing-lg;
  text-align: center;
  color: $light-gray;
  border: 1px solid rgba($danger, 0.2);
  
  p {
    margin: 0;
  }
}

.pinned {
  color: $primary-color;
  font-weight: 500;
  display: flex;
  align-items: center;
  
  svg {
    margin-right: $spacing-xs;
  }
}